Question

我有一个带有垂直滚动条的圆滑传送带。但是我有一个问题。滑块在整个页面上滚动。我需要像产品div一样在特定div上滚动。。有人可以建议。

  Html Code: 
    <section class="slide-wrapper">
        <!-- Need to scroll only inside this div -->
    </section>

Script: 

        var $slider = $("#slider");
        $slider.on('init', function () {
            mouseWheel($slider);
        }).slick({
            dots: true,
            vertical: true,
            infinite: false
        });
        function mouseWheel($slider) {
            $(window).on('wheel', { $slider: $slider }, mouseWheelHandler);
        }
        function mouseWheelHandler(event) {
            event.preventDefault();
            var $slider = event.data.$slider;
            var delta = event.originalEvent.deltaY;
            if (delta > 0) {
                $slider.slick('slickPrev');
            } else {
                $slider.slick('slickNext');
            }
        }

Answer 1

您好，我也遇到了同样的问题。终于我找到了解决方案。参考 https://github.com/kenwheeler/slick/issues/122

https://github.com/jquery/jquery-mousewheel

codepen链接：https://codepen.io/pavankumar_kori/pen/mdJJaGW

const slider = $(".slider-item");
slider
  .slick({
  vertical: true,
  infinite: false,
  arrows:false,
  dots: true
  });

slider.on('wheel', (function(e) {
  e.preventDefault();

  if (e.originalEvent.deltaY > 0) {
    $(this).slick('slickNext');
  } else {
    $(this).slick('slickPrev');
  }
}));

body{
  background: #419be0;
}
.container {
  margin-left:auto;
  margin-right:auto;
  width: 100%;
  color: #333;
}
.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
  margin:10px;
}

h4{
  text-align:center;
}
h3{
  text-align:center;
  height:200px;
}

<script src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css" rel="stylesheet"/>
<section style="height: 500px;background: #f436e3"></section>
<h4>With Mouse Scroll</h4>
<div class='container'>
  <div class='slider-item'>
    <div>
    <img src="https://coverfiles.alphacoders.com/576/57603.png" alt="" style="width:1200px;height:600px">
  </div>
  <div>
    <img src="https://i.imgur.com/1Mh1n02.jpg" alt="" style="width:1200px;height:600px">
  </div>
  <div>
    <img src="https://www.wallpaperup.com/uploads/wallpapers/2015/11/05/829805/c78d7d796a1c33527e4874a988544c56.jpg" alt="" style="width:1200px;height:600px">
  </div>
  <div>
    <img src="https://i.imgur.com/1Mh1n02.jpg" alt="" style="width:1200px;height:600px">
  </div>
  <div>
    <img src="https://www.ecopetit.cat/wpic/mpic/9-99582_beautiful-dual-monitor-space-wallpapers-high-definition-double.jpg" alt="" style="width:1200px;height:600px">
  </div>
  <div>
    <img src="https://i.imgur.com/aBHYvfN.jpg" alt="" style="width:1200px;height:600px">
  </div>
  <div>
    <img src="https://www.wallpaperup.com/uploads/wallpapers/2015/11/05/829805/c78d7d796a1c33527e4874a988544c56.jpg" alt="" style="width:1200px;height:600px">
  </div>
  <div>
    <img src="https://www.wallpaperup.com/uploads/wallpapers/2015/11/04/829241/7de200e566211ff489d34579cdf193bc.jpg" alt="" style="width:1200px;height:600px">
  </div>
  </div>
</div>
<section style="height: 500px;background: #f436e3"></section>

div内的鼠标滚轮上的光滑轮播滚动

1 个答案: