“如何启用光滑的滑块鼠标滚轮滚动并修复滚动上的部分位置?”

"How to Enable Slick Slider Mousewheel Scroll and Fix Section Position on Scroll?"

提问人:Muhammad Sameer 提问时间:9/27/2023 更新时间:9/27/2023 访问量:60

问:

我有一个问题,我做了一个光滑的滑块,可以在鼠标滚轮上工作,但这里有 2 个问题,第一个是我希望当我到达它部分时,我希望我的窗口停止,我的滑块在鼠标滚轮上会启动,我没有得到它,第二个问题是我在鼠标滚轮上做了一个光滑的滑块,但当我达到长度时当我光滑的滑块长度完成时,我无法滚动我想要的窗口,所以我的窗口开始滚动。 第一个修复了我的主要部分,因此用户可以知道这是光滑的滑块 其次,当鼠标向下完成光滑长度时,我的窗口滚动在鼠标向上时以类似方式开始。

        <div class="fix-marque-main">
          <!-- Some other divs may be present here -->

          <!-- Slick slider section -->
          <div class="">
            <div class="slick-title">
              <div class="cols">
                <p>
                  Come visit our team at the Burbank, CA showroom to discuss your next project
                </p>
              </div>
              <div class="cols">
                <p>
                  Bring or mail us the product you need packaged
                </p>
              </div>
              <div class="cols">
                <p>
                  A custom dieline and a CAD cut sample can be made and returned within 24-48 hours
                </p>
              </div>
            </div>
          </div>
        </div>
    $(document).ready(function () {
                    let blockTimeout = null;
                    let allowScrollDown = false;
                    let sliderInitialized = false;

                    if (!sliderInitialized) {
                        $(".slick-title").slick({
                            slidesToShow: 1.3,
                            infinite: false,
                            dots: false,
                            arrows: false,
                            responsive: [
                                {
                                    breakpoint: 1024,
                                    settings: {
                                        slidesToShow: 1,
                                    },
                                },
                            ],
                        });

                        sliderInitialized = true;
                    }

                    // Add mouse wheel functionality to the slick slider

                    // Getting the length of the slick slider
                    var item_length = $('.slick-title > div').length;
                    console.log(item_length);

                    $(".slick-title").on("mousewheel DOMMouseScroll wheel", function mouseWheel(e) {
                        var deltaY = e.originalEvent.deltaY;
                        e.preventDefault();
                        e.stopPropagation();

                        clearTimeout(blockTimeout);
                        blockTimeout = setTimeout(function () {
                            blocked = false;
                        }, 50);

                        if (
                            (deltaY > 0 && !$(".slick-title").slick("slickNext")) ||
                            (deltaY < 0 && !$(".slick-title").slick("slickPrev"))
                        ) {
                            $(".slick-title").off("mousewheel DOMMouseScroll wheel");

                            if (allowScrollDown && deltaY > 0) {
                                console.log("allow");
                                return;
                            }
                        } else if (deltaY > 0) {
                            $(".slick-title").slick("slickNext");
                            console.log(item_length);
                        } else {
                            $(".slick-title").slick("slickPrev");
                            console.log(item_length);
                        }

                        var index = $(".slick-title").slick("slickCurrentSlide");
                        console.log(index, "check");
                    });
                });
                $(document).ready(function () {
                    let blockTimeout = null;
                    let allowScrollDown = false;
                    let sliderInitialized = false;

                    if (!sliderInitialized) {
                        $(".slick-title").slick({
                            slidesToShow: 1.3,
                            infinite: false,
                            dots: false,
                            arrows: false,
                            responsive: [
                                {
                                    breakpoint: 1024,
                                    settings: {
                                        slidesToShow: 1,
                                    },
                                },
                            ],
                        });

                        sliderInitialized = true;
                    }

                    // Add mouse wheel functionality to the slick slider

                    // Getting the length of the slick slider
                    var item_length = $('.slick-title > div').length;
                    console.log(item_length);

                    $(".slick-title").on("mousewheel DOMMouseScroll wheel", function mouseWheel(e) {
                        var deltaY = e.originalEvent.deltaY;
                        e.preventDefault();
                        e.stopPropagation();

                        clearTimeout(blockTimeout);
                        blockTimeout = setTimeout(function () {
                            blocked = false;
                        }, 50);

                        if (
                            (deltaY > 0 && !$(".slick-title").slick("slickNext")) ||
                            (deltaY < 0 && !$(".slick-title").slick("slickPrev"))
                        ) {
                            $(".slick-title").off("mousewheel DOMMouseScroll wheel");

                            if (allowScrollDown && deltaY > 0) {
                                console.log("allow");
                                return;
                            }
                        } else if (deltaY > 0) {
                            $(".slick-title").slick("slickNext");
                            console.log(item_length);
                        } else {
                            $(".slick-title").slick("slickPrev");
                            console.log(item_length);
                        }

                        var index = $(".slick-title").slick("slickCurrentSlide");
                        console.log(index, "check");
                    });
                });

我试图阻止它,但没有解决这个问题。并尝试修复我的主要部分. 请记住,它存在于容器的中心fix-marque-main

javascript jquery slick.js 水平滚动 鼠标滚轮

评论


答: 暂无答案