问题描述
我在按钮“ onmousedown”上绑定了一个函数,该函数模拟在div中滚动。多次单击并按住太久会出现问题。
例如,如果用户滚动到div的底部,并快速多次单击“向下”按钮,则div内的OL上下抖动非常快(快于33ms,这是最快的滚动速度)可能)。我相信它会创建多个计时器对象,每个对象都会滚动div而不清除这些对象?
另一个问题是,如果将按钮保持太长时间并释放,则它的作用就像按钮仍保持按下。 (以33ms的速率滚动)。似乎一旦将鼠标从按钮上抬起就忘记了删除计时器对象
要解决第二个问题,用户必须在滚动的相反方向上单击一次按钮,然后它再次变为静态。
这是需要滚动的div
function scrollButton(btn,start,speedUp,eDiv,upward) {
var tempStart = start;
var repeat = function () {
//check for boundary conditions
if (eDiv.scrollTop >= 0 && eDiv.scrollTop <= (eDiv.scrollHeight - eDiv.clientHeight)) {
scrollErrorLog(eDiv,upward);
}
//fire scroll method and reduce time interval
t = setTimeout(repeat,start);
if (start > 60) {
start = Math.round(start / speedUp);
} else start = 33;
}
//bind functions to button events
btn.onmousedown = function () {
repeat();
}
btn.onmouseup = function () {
clearTimeout(t);
start = tempStart;
}
btn.onmouSEOut = function () {
clearTimeout(t);
start = tempStart;
}
btn.ontouchcancel = function () {
clearTimeout(t);
start = tempStart;
}
btn.ontouchend = function () {
clearTimeout(t);
start = tempStart;
}
btn.ontouchstart = function () {
repeat();
}
}
var scrollErrorLog = function (eDiv,upward) {
//calculate maximum scroll height
var maxScrollHeight = eDiv.scrollHeight - eDiv.clientHeight;
//how much scroll in one button click iteration
var jumpSize = 40;
//going up or down?
if (upward) {
if (eDiv.scrollTop > 0) {
scrollTimes--;
}
} else {
if (eDiv.scrollTop < maxScrollHeight) {
scrollTimes++;
}
}
//scroll the div
if (eDiv.scrollTop >= 0 && eDiv.scrollTop <= maxScrollHeight) {
eDiv.scrollTop = scrollTimes * jumpSize;
}
// if out of bounds,return to start position and reset scrollTimes tracker variable
if (eDiv.scrollTop < 0 || scrollTimes < 0) {
eDiv.scrollTop = 0;
scrollTimes = 1;
} else if (eDiv.scrollTop > maxScrollHeight) {
eDiv.scrollTop = maxScrollHeight;
scrollTimes = maxScrollHeight / jumpSize;
}
}
编辑:我以这个问题为指导原则:Need javascript code for button press and hold
编辑2:这主要需要在触摸上进行。在按钮上单击它有时会执行此操作,有时则不会。在触摸屏上,它会不断发生这两个错误。
解决方法
直到有人发现更有效的解决方案。
创建新的全局变量compareScroll = 0;然后只需在滚动前检查compareScroll!= scrollTimes,然后在函数结尾处进行compareScroll = scrollTimes
//where we are currently
var scrollTimes = 1;
//check if scrolltimes is at the end
var compareScroll = 0;
var scrollErrorLog = function (eDiv,upward) {
//calculate maximum scroll height
var maxScrollHeight = eDiv.scrollHeight - eDiv.clientHeight;
//how much scroll in one button click iteration
var jumpSize = 40;
//going up or down?
if (upward) {
if (eDiv.scrollTop > 0) {
scrollTimes--;
}
} else {
if (eDiv.scrollTop < maxScrollHeight) {
scrollTimes++;
}
}
//checking if we are not at the end of the DIV
if (compareScroll != scrollTimes) {
//scroll the div
if (eDiv.scrollTop >= 0 && eDiv.scrollTop <= maxScrollHeight) {
eDiv.scrollTop = scrollTimes * jumpSize;
}
compareScroll = scrollTimes;
} else {
//if we are at the end of the div reset everything
clearTimeout(t);
// if out of bounds,return to start position and reset scrollTimes tracker variable
if (eDiv.scrollTop < 0 || scrollTimes < 0) {
eDiv.scrollTop = 0;
scrollTimes = 1;
} else if (eDiv.scrollTop > maxScrollHeight) {
eDiv.scrollTop = maxScrollHeight;
scrollTimes = maxScrollHeight / jumpSize;
}
}
}
编辑:这仍然不能解决自动滚动的问题,尽管还没有结束。