停止滚动页面，滚动轮播

Question

我在获得效果方面有问题。 在我有轮播的网站上，我想获得-当我滚动页面并找到一个轮播时，我希望轮播开始滚动（滚动停止的页面），在发现所有幻灯片之后，我希望页面开始滚动。

 var slider = $('.slider'); $('.slider').slick({ dots: false, vertical: true, arrows: false, variableWidth: false, }); slider.on('wheel', (function(e) { e.preventDefault(); if (e.originalEvent.deltaY < 0) { $(this).slick('slickPrev'); } else { $(this).slick('slickNext'); } })); 

 .slide { background: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <section id="carousel"> <div class=" position-relative"> <div class="container"> <div class="slider"> <div class="slide"> <h1>Slide 1</h1> </div> <div class="slide"> <h1>Slide 2</h1> </div> <div class="slide"> <h1>Slide 3</h1> </div> <div class="slide"> <h1>Slide 4</h1> </div> </div> </div> </div> </section> 

和演示版本

如何解决这个问题呢？ 轮播可滚动时窃取页面

Answer 1

由于某种原因， edge事件无法正常工作。 当它的第一张或最后一张幻灯片不触发beforeChange时，我已将infinite属性设置为true并使用isLast检查最后一张（或第一张）幻灯片，看看：

 var slider = $('.slider'), isLast = true, stop = false, next = 0; $('.slider').slick({ dots: false, vertical: true, arrows: false, variableWidth: false, infinite: false, speed: 300 }); slider.on('wheel', (function(e) { if (!stop) { if (e.originalEvent.deltaY < 0) { $(this).slick('slickPrev'); } else { $(this).slick('slickNext'); } if (!isLast) { event.preventDefault(); isLast = true; } else { if (next != 0) stop = true; } } })); $('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) { isLast = false; next = nextSlide; }); $('.slider').on('edge', function(event, slick, direction) { console.log(slick, direction); }); 

 .slide { background: green; height: 300px; } .container { margin: 300px 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <section id="carousel"> <div class=" position-relative"> <div class="container"> <div class="slider"> <div class="slide"> <h1>Slide 1</h1> </div> <div class="slide"> <h1>Slide 2</h1> </div> <div class="slide"> <h1>Slide 3</h1> </div> <div class="slide"> <h1>Slide 4</h1> </div> </div> </div> </div> </section>