javascript - 当 div 到达页面上的固定位置时停止滚动

Question

当用户向下滚动页面时，当 DIV 在 View 中并在视口(viewport)中居中时，我试图停止滚动。

当页面停止并且用户滚动时，我需要 DIV 的内容水平滚动，然后允许用户继续滚动。

    function pauseScroll() {
        //    $(document).bind('mousewheel DOMMouseScroll', function() {
        disableScroll();

        console.log('trying to scroll Card: ' + selCard);

        setTimeout(pauseStop(), 500);
        slideCard(selCard);
        //   });
    }

    function pauseStop() {
        console.log('Pause Stop');
    }

    function unpauseScroll() {
        //    $(document).unbind('mousewheel DOMMouseScroll');
        enableScroll();
        document.getElementById("status").innerHTML = "enabled";
        document.getElementById("status").className = "enabled";
    }


    // left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    var keys = {
        37: 1,
        38: 1,
        39: 1,
        40: 1
    };

    function preventDefault(e) {
        e = e || window.event;
        if (e.preventDefault)
            e.preventDefault();
        e.returnValue = false;
    }

    function preventDefaultForScrollKeys(e) {
        if (keys[e.keyCode]) {
            preventDefault(e);
            return false;
        }
    }

    function disableScroll() {
        if (window.addEventListener) // older FF
            window.addEventListener('DOMMouseScroll', preventDefault, false);
        window.onwheel = preventDefault; // modern standard
        window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
        window.ontouchmove = preventDefault; // mobile
        document.onkeydown = preventDefaultForScrollKeys;
    }

    function enableScroll() {
        if (window.removeEventListener)
            window.removeEventListener('DOMMouseScroll', preventDefault, false);
        window.onmousewheel = document.onmousewheel = null;
        window.onwheel = null;
        window.ontouchmove = null;
        document.onkeydown = null;
    }


    $(window).scroll(function() {
        if ($("div").hasClass("cardstop")) {

            var top_of_element = $(".cardstop").offset().top;
            var bottom_of_element = $(".cardstop").offset().top + $(".cardstop").outerHeight();
            var bottom_of_screen = $(window).height()
            var top_of_screen = $(window).scrollTop();
            var elHeight = bottom_of_element - top_of_element;
            var topSpace = ((($(window).height()) - elHeight) / 2);
            var scrollFix = top_of_screen + topSpace;

            //top_of_screen
            var st = $(this).scrollTop();
            if (st > lastScrollTop) {
                // downscroll code
                console.log('Top of el: ' + top_of_element);
                console.log('TopScreen: ' + top_of_screen);
                console.log('Space: ' + topSpace);
                console.log('Bot of el: ' + bottom_of_element);
                console.log('BotScreen: ' + bottom_of_screen);;

                if (top_of_element < scrollFix) {

                    if (selCard = 1) {
                        console.log('One to Two');
                        pauseScroll();
                        selCard = 2;
                    } else if (selCard = 2) {
                        pauseScroll();
                        selCard = 1;
                    }
                    unpauseScroll();
                }
            } else {
                // upscroll code
                console.log('Scroll Up: ');

                if (selCard = 3) {
                    console.log('3 to 2');
                    pauseScroll();
                    selCard = 4;
                }

                if (selCard = 4) {
                    pauseScroll();
                    unpauseScroll();
                }
            }
            lastScrollTop = st;

            // if (bottom_of_screen > top_of_element) {

            // The element is visible, do something
        }

    });

这个过程有点不正常，它滚动卡片内容的速度太快，然后继续前进。

任何关于我哪里出错的指示都会很棒。

问候

我在 [jsfiddle] 上添加了一个模型:https://jsfiddle.net/stato74/sjtp9wv3/2/

Answer 1

我承认你会使用这个 JS 工具:Waypoints http://imakewebthings.com/waypoints/

如果您更喜欢硬方式，那么您可以设置“html, body{overflow-y=hidden}”并设置您的 Div {overflow-y=scroll}

这样您就可以滚动 div 而不是整个页面。 如果我稍后找到，我可以为此提供代码(如果需要)