我正试图在div位置冻结滚动直到用户点击,将另一个div悬停。用户操作后,应该释放滚动并正常工作!但它不起作用!如何在用户悬停后使滚动正常工作,单击此div?以下是完整的参考代码:https://jsfiddle.net/tqwr3hrp/(在chrome上测试过)!
<div class="stopscroll">click/mouseover here to stop</div>
<div class="likebox"></div>
$(window).scroll(function(e) {
$('html, body').animate({ scrollTop: $('.likebox').offset().top - 100 }, 1000);
});
$('.stopscroll').on('tap click mouseover', function(e) {
$(window).off('scroll');
//another attempt
$('html, body').off('scroll');
//and another attempt
$('html, body').stop().animate();
});
答案 0 :(得分:0)
此代码使您的页面实际自动滚动:
function start_scrolling() {
$('body').animate({
scrollTop: $('body').height() - $(window).height()
}, 10000, 'linear');
}
start_scrolling();
如果您将div悬停在该div上,则此代码可让滚动停止,如果您将其取消,则会让它再次启动。而不是对click
做同样的事情,我建议添加一个复选框,我在这个例子中做了。如果选中该复选框,则照常滚动,如果没有,让用户滚动自己。
$('.stopscroll').mouseover(function() {
$('body').stop();
}).mouseout(function() {
if($('#autoscroll').is(':checked')) {
start_scrolling();
}
});
最后一个代码是奖励,让用户立即控制:如果用户滚动,则停用自动滚动。如果他希望再次启用自动滚动,则可以使用复选框。
$('body').on('scroll wheel DOMMouseScroll touchmove', function() {
$('body').stop();
$('#autoscroll').prop('checked', false);
});