【问题标题】:How to check scroll position in front of div如何检查div前面的滚动位置
【发布时间】:2015-08-14 10:06:48
【问题描述】:

我创建了一个具有滚动功能的父 div。它有包含文本内容的子 div,我想检查滚动是否在其中一个子 div 前面。

我通过比较顶部滚动位置与

进行了尝试

div.offset().top

但是当我向下滚动时,div 将仅计算从父级偏移顶部位置的可见高度,并且滚动将计算它从父级开始的顶部。我正在检查滚动的位置,如下所示:

if(scrollPosition>div.offset().top && scrollPostion (div.offset.top+div.height) ) {//scroll present }

获得 div 最高位置的正确方法是什么?

块引用

提前致谢。

【问题讨论】:

  • 您想使用父级的scrollTop 并将其与子级div 的position().top(不是offset)进行比较 - 位置是相对于父级,而偏移量是相对于文档跨度>
  • 实际上,我正在使用子 div 相对于文档的偏移量和滚动的滚动顶部...因为我将滚动子 div..子 div 会上升...因为子 div 具有不同的高度。 .so 很难获得子 div 的精确偏移量,可以与滚动的滚动顶部进行比较

标签: javascript html scroll


【解决方案1】:

你需要添加父元素的 offsetTop。

var t = div.offsetTop;
var p = div;
while (p=p.offsetParent)
    t += p.offsetTop;

【讨论】:

    【解决方案2】:

    假设两个盒子,一个有滚动名为container,另一个是名为target的子:

    <div id="container">
        <div id="target"></div>
    </div>
    <script type="text/javascript">
        var container = document.getElementById('container'),
            target = document.getElementById('target');
        if((container.scrollTop - target.offsetTop) > 0 && (container.scrollTop - target.offsetTop) < target.offsetHeight) {
            console.log('in range');
        }
    </script>
    

    target.offsetHeight 不包含边距。

    【讨论】:

    • 为一个孩子滚动是正确的..但是如果那个孩子离开文档并尝试找到文档中的下一个孩子的偏移量...这个孩子的偏移量将来自文档但是滚动顶部将来自第一个孩子,因此在这种情况下此计算将不正确。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-06-11
    • 1970-01-01
    • 1970-01-01
    • 2012-06-06
    • 1970-01-01
    • 2013-06-30
    • 1970-01-01
    相关资源
    最近更新 更多