javascript - 如何做自动滚动

Question

我的站点中有一些 div
我希望当用户向上滚动一点时，页面将滚动并显示下一个 div
例如，如果我有 2 个 div:

 <div style="height:800px;">some content </div>
 <div style="height:800px;">some content </div>

因此，当页面加载第一个 div 时显示，现在我希望如果用户稍微滚动到下一个 div，所有页面将向上滚动并显示下一个 div

Answer 1

使用 jQuery

取自Check if element is visible after scrolling

您可以使用此函数来检测用户是否“稍微滚动到下一个 div”，然后显示您打算显示的 div:

<div id="div1" style="height:800px;">some content</div>
<div id="div2" style="height:800px;">some content</div>

// checks if the element passed in is in view
function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

// get the element to check e.g. the "next div" in your case
var el = document.getElementById('div2');

// when the user scrolls, check if the element has come into view
window.onscroll = function() {
    if (isScrolledIntoView(el)) {
        // take the user to the top of the div by it's id
        $('html, body').animate({ 
            scrollTop: $('#div2').offset().top 
        }, 'slow');
        return false;
    }
}