搜索

首页  >  问答  >  正文

javascript - 请教,如何判断一个元素是否滚动到屏幕可视区域底部?

一个元素原来位于屏幕可视区域底部的上面,当滚动条往上滚动时,这个元素接触到了屏幕底部,我想在该元素接触到屏幕底部时触发一个函数,那么怎么才能捕获到元素接触到屏幕底部这个情况呢?

给我你的怀抱给我你的怀抱2751 天前749

全部回复(3)我来回复

  • 高洛峰

    高洛峰2017-05-19 10:28:18

    <p class="element" style="height: 100px;width:100px; border:1px solid;margin-top:500px"></p>

    元素触底就变红,否则变白色

        <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script>
            var element = $('.element');
            var win = $(window);
            win.scroll(function() {
                if (element.offset().top + element.height() <= win.height() + win.scrollTop()) {
                    element.css('backgroundColor', '#f33');
                } else {
                    element.css('backgroundColor', '#fff');
                }
            })
        </script>

    回复
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:28:18

    可以通过js得盒子模型获取到当前的scrollTop还有元素的clientTop,再已知盒子高度的情况下进行判断。

    回复
    0
  • 滿天的星座

    滿天的星座2017-05-19 10:28:18

    雷雷

    回复
    0
  • 取消回复