Question

我有一个功能，基本上在带有班级箭头的箭头上运行时#Arrow＆＃39;点击。该函数将找到该箭头的父项，然后找到下一个兄弟，其中包含一个＆＃39; scrollPoint＆＃39;然后滚动到该区域。我刚刚描述的所有内容对我来说都很合适我遇到的问题是，如果文档的底部在我滚动的元素顶部之前触及我的视口底部，则会触及视口的顶部，它只会出现故障并滚动回到最顶层的文件。所以我认为我需要做的是检测是否会发生这种情况然后设置一个最大滚动值，以便滚动函数不会尝试滚动传递文档的底部。

如何检测文档的底部是否在视口中可见并防止滚动到那么远？

我将在下面提供我的代码，希望它会有所帮助，如果您有任何问题或需要更多说明我要求的内容，请告诉我。感谢

这是我的组件，虽然我只是要求只有scrollTo函数才真正相关

exports.init = init;
function init (options){
    var downArrows = document.querySelectorAll(options.selector);
    downArrows.forEach(triggerScrollHandler);
}

function scrollTo(element, to, duration) {
    if (duration < 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

function scrollHandler (e) {
    e.preventDefault();
    var el         = this,
        scrollPoint = findSibling(el),
        offsetVal  = scrollPoint.getBoundingClientRect(),
        windowOffset = window.pageYOffset;

    offsetVal = offsetVal.top + windowOffset - 1;
    scrollTo(document.body, offsetVal, 600);
}

function findParent(el) {

    while (el && el.parentNode) {
        el = el.parentNode;
        if (el.tagName) {
            return el;
        }
    }
  return null;
}

function findSibling (el) {
    var parent = findParent(el),
        siblings = document.querySelectorAll('.scrollPoint'),
        scrollTo;
    siblings.forEach(function (currentSib, i) {
        if(scrollTo == 'found'){
            scrollTo = currentSib;
        }
        if(currentSib == parent){
            scrollTo = 'found'
        }
    });

    return scrollTo;
}

function triggerScrollHandler (el) {
    el.addEventListener('click', scrollHandler);
}

这就是我在app.js中调用的地方

var scrollHandler = require('./components/scrollHandler.js');

(function(){
    scrollHandler.init({
        selector: '.downArrow'
    });
}())

Answer 1

将它放在滚动侦听器中：

if (document.body.scrollHeight <= document.body.scrollTop + document.body.clientHeight ){
            console.log('scrolled to bottom');
}

简单，纯粹的JS解决方案：）

纯Javascript，如何检测scrollTop是否会滚动到页面底部？

1 个答案: