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

Question

I am trying to stop scrolling when a DIV is in view and centered in the viewport as the user scrolls down the page.

When the page is stopped and the user scrolls I need the content of the DIV to scroll horizontally and then allow the user to continue scrolling.

    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
        }

    });

The process is kind of working apart it's scrolling the card content too quickly and then moving on.

Any pointers on where I am going wrong would be great.

Regards

I've added a mockup on [jsfiddle]: https://jsfiddle.net/stato74/sjtp9wv3/2/

Answer 1

I would admit you to use this JS tool: Waypoints http://imakewebthings.com/waypoints/

If you prefer the hard way, then you can set "html, body{overflow-y=hidden}" and set your Div {overflow-y=scroll}

This will let you scroll the div instead of the whole page. If I will find some time later, I can provide code for this (if needed)

Answer 2

the maximum value of scrollTop is not scrollHeight , it's scrollHeight - outerHeight .

This will give you the correct value:

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