问题描述
标题描述了我的需求。什么实际有效:
- slick.js 中的鼠标滚动。我使用以下代码:(How to continue scrolling the page after the last slide of the slick slider in the both direction up and down?)
$(document).ready(function() {
const slider = $('.slider');
function onSliderAfterChange(event,slick,currentSlide) {
$(event.target).data('current-slide',currentSlide);
}
function onSliderWheel(e) {
var deltaY = e.originalEvent.deltaY,$currentSlider = $(e.currentTarget),currentSlickIndex = $currentSlider.data('current-slide') || 0;
if (
// check when you scroll up
(deltaY < 0 && currentSlickIndex == 0) ||
// check when you scroll down
(deltaY > 0 && currentSlickIndex == $currentSlider.data('slider-length') - 1)
) {
return;
}
e.preventDefault();
if (e.originalEvent.deltaY < 0) {
$currentSlider.slick('slickPrev');
} else {
$currentSlider.slick('slickNext');
}
}
slider.each(function(index,element) {
var $element = $(element);
// set the length of children in each loop
// but the better way for performance is to set this data attribute on the div.slider in the markup
$element.data('slider-length',$element.children().length);
})
.slick({
infinite: false,slidesToShow: 1,slidesToScroll: 1,dots: false,arrows: false
})
.on('afterChange',onSliderAfterChange)
.on('wheel',onSliderWheel);
});
- 当 div 到达视口顶部时,也会收到警报 (Function to be called once div hits top of viewport window)
$(document).ready(function() {
$('.test').attr("attop",false);
var lastScrollTop = 0;
$(window).on('scroll',function() {
var windowScrollTop = $(this).scrollTop();
if (windowScrollTop > lastScrollTop) {
var currentDiv = $('.test[attop="false"]:first');
if (currentDiv && currentDiv.length > 0) {
if (windowScrollTop >= currentDiv.offset().top) {
currentDiv.attr('attop',true);
alert('reached top');
}
}
} else {//this part needs to be removed to call only once
var currentTopDivs = $('.test[attop="true"]');
if (currentTopDivs && currentTopDivs.length > 0) {
$.each(currentTopDivs,function(i,elem){
if (windowScrollTop <= $(elem).offset().top) {
$(elem).attr('attop',false);
}
});
}
}
lastScrollTop = windowScrollTop;
});
});
我的最后一个问题,根据我的需要把它放在一起。 我试着把代码的第一部分,没有
$(document).ready(function() {
进入第二部分,其中
alert('reached top');
但幸运的是,什么都没发生。
感谢您的提示。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)