将滚动事件绑定到特定元素
将滚动事件绑定到特定元素
提问于 2018-06-05 05:24:22
我目前希望仅当鼠标在图像上时才向图像序列添加滚动事件。我不希望页面滚动，但只是滚动通过图像。
$(document).ready(function () {
var pictureCount = $('#container img').length;
var scrollResolution = 50;
animateImage();
});
function animateImage() {
var currentScrollPosition = window.pageYOffset;
var imageIndex = Math.round(currentScrollPosition / scrollResolution);
if (imageIndex >= pictureCount) {
imageIndex = pictureCount - 1; // Select last image
}
$("#container img").hide();
$("#container img").eq(imageIndex).show();
}
$(window).bind('scroll', function() {
animateImage();
});<div id="container">
<img src="frames/noindex_basset_02_img000.jpg" class="animated">
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-05 06:53:15
我写了一个小示例，说明如何捕获容器上的wheel事件，并根据阈值和滚动方向交换对象。
!function(){
var totalVerticalDistanceScrolled = 0;
//changable to configure how sensitive the scroll change is
var scrollDistanceToChangeElements = 200;
var $elementsToChange = $('.animated');
//capture the wheel event when it is over the container
$('#container').on('wheel', function(e){
//sum up how much the user has scrolled. scrolling up is negative
totalVerticalDistanceScrolled += e.originalEvent.deltaY;
//in the threshold has been met either up or down, swap elements
if (Math.abs(totalVerticalDistanceScrolled) >= scrollDistanceToChangeElements) {
var currentElementIndex = $elementsToChange.filter('.active').index();
var nextElementIndex;
//hide the currently shown element
$elementsToChange.eq(currentElementIndex).removeClass('active');
if (totalVerticalDistanceScrolled > 0) {
//get the next element index, wrap back to the first element at the end
nextElementIndex = (currentElementIndex + 1) % $elementsToChange.length;
} else {
//get the previous element index, wrap back to the last element at the end
nextElementIndex = ( currentElementIndex || $elementsToChange.length ) - 1;
}
//show the next desired element
$elementsToChange.eq(nextElementIndex).addClass('active');
//clear out the total distance so the user can change direction if they want
totalVerticalDistanceScrolled = 0;
}
});
}();.animated {
display: none;
min-width:200px;
min-height: 200px;
}
.animated.active { display: inline-block; }
.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }
#container {
max-width: 200px;
max-height: 200px;
overflow: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="animated red active"></div>
<div class="animated green"></div>
<div class="animated blue"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50688976
复制相关文章
相似问题