div 内鼠标滚轮上的光滑旋转木马滚动

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

代码笔链接： 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>