我正在尝试检测用户是否向上或向下滚动。但我不想知道触控板上滚动的强度,而是想知道他使用触控板滚动的次数。
这个想法是复制类似this的东西,除了当用户向下滚动几次时,它会继续移动到下一张幻灯片(就像用户正在使用键盘一样)。
到目前为止,我一直在使用这段代码:
var delta = event.originalEvent.wheelDelta;
但这仅检测用户是否正在滚动。
有人知道如何解决这个问题吗?
最佳答案
您可以使用 setTimeout 和clearTimeout 来强制一次鼠标滚轮滑动仅进行一次移动。下面是一个示例,只需更改 SLIDE_TIMEOUT 变量即可获得不同的结果。 http://jsfiddle.net/s6hU8/1/
JavaScript
var SLIDE_TIMEOUT = 100;
var slides = document.getElementsByClassName("slide");
var slideIndex = slides.length - 1;
var evtSlide = null;
var upOrDown = 0;
window.addEventListener("mousewheel", handleWheel, false);
window.addEventListener("DOMMouseScroll", handleWheel, false);
function handleWheel(e) {
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
upOrDown = delta;
if(evtSlide)
window.clearTimeout(evtSlide);
evtSlide = window.setTimeout(handleSlide, SLIDE_TIMEOUT);
}
function handleSlide() {
var offset = upOrDown, newIndex = slideIndex;
newIndex = (newIndex + offset + slides.length) % slides.length;
console.log(newIndex);
slides[slideIndex].style.zIndex = 1;
slides[newIndex].style.zIndex = 2;
slideIndex = newIndex;
}
HTML
<div class="slide"><h1>9</h1></div>
<div class="slide"><h1>8</h1></div>
<div class="slide"><h1>7</h1></div>
<div class="slide"><h1>6</h1></div>
<div class="slide"><h1>5</h1></div>
<div class="slide"><h1>4</h1></div>
<div class="slide"><h1>3</h1></div>
<div class="slide"><h1>2</h1></div>
<div class="slide"><h1>1</h1></div>
CSS
.slide {
position:absolute;
left:0;top:0;right:0;bottom:0;
padding:0;margin:0;
text-align:center;
font-size:200%;
bac
kground-color:白色; }
关于javascript - 不连续滚动 - 检测用户是否停止滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20123064/