Question

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

当页面停止并且用户滚动时，我需要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而不是整个页面。如果我稍后会找到一些时间，我可以为此提供代码（如果需要）

Answer 2

scrollTop的最大值不是scrollHeight，而是scrollHeight - outerHeight。

这将为您提供正确的值：

var elem = $("body");
var maxScrollTop = elem[0].scrollHeight - elem.outerHeight();
$(document).scroll(function(){
   if(e.target.scrollTop > maxScrollTop ){
     e.target.scrollTop = maxScrollTop ;
   }
});

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

2 个答案: