vue判断滚动条到底部

        mounted() {
                this.$nextTick(() => {            // 进入nexTick
                    var bady = document.getElementById("dody");   // 获取滚动条的dom
                    // console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
                    bady.onscroll = () => {               // 获取距离顶部的距离
                        var scrollTop = bady.scrollTop;
                        // 获取可视区的高度
                        var windowHeight = bady.clientHeight;
                        // 获取滚动条的总高度
                        var scrollHeight = bady.scrollHeight;
                        console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
                        if(scrollTop+windowHeight>=scrollHeight){
                            // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部

                            this.shows = false
                        }
                    }
                });

            },

原文地址:https://www.cnblogs.com/tomyangym/p/10923339.html

时间: 2024-11-06 13:37:35

vue判断滚动条到底部的相关文章

JS判断滚动条到底部

form:http://www.uphtm.com/js/269.html判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight.

判断滚动条到底部的JS代码

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight. 废话不多少说,赶紧上代码(兼容不同的浏览器). //滚动条在Y轴上的滚动

知识点:整个doucument而言如果判断滚动条滚动到底部

滚动条没有实际的高度.只是为了呈现效果才在外型上面有长度. 在js当中也没有提供滚动条的高度API. 参考了网上有关资料:判断滚动条到底部的基本逻辑是滚动条滚动的高度加上视口的高度,正好是document的高度,公式表示为 滚动条滚动的高度+浏览器视口的高度>=document的高度. 参考网上资料,具体代码如下: //滚动条在Y轴上的滚动距离 function getScrollTop() { var scrollTop = 0, bodyScrollTop = 0, documentScro

JS如何判断滚动条是否滚到底部

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight. 代码如下(兼容不同的浏览器). //滚动条在Y轴上的滚动距离 funct

Jquery判断滚动条是否到达窗口顶部和底部

<script type="text/javascript"> $(document).ready(function(){     alert($(window).height()); //浏览器时下窗口可视区域高度     alert($(document).height()); //浏览器时下窗口文档的高度     alert($(document.body).height());//浏览器时下窗口文档body的高度     alert($(document.body)

知识点:整个div而言如果判断滚动条滚动到底部

上篇文章解决的是整个document如果判断滚动条滚动到底部,那么对于文档中的div如果判断div元素滚动条滚动到底部呢? 针对这个问题,结合上文的思路,作者做了测试,经过几轮代码修正和迭代解决了这个问题. 代码如下: <div id="outer"> <div id="inner"> 90908080 </div> </div> <script type="text/javascript"&

jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部

jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部:http://www.haorooms.com/post/jquery_scroll_upanddown —————————————————————————————————————— //滚动条滚动加载更多内容   //判断滚动方向   function scroll(fn) {        var beforeScrollTop = document.body.scrollTop || document.documentElemen

jquery 判断滚动条到达了底部和顶端的方法

这篇文章主要介绍了jquery 判断滚动条到达了底部和到达顶端的方法,需要的朋友可以参考下 复制代码 代码如下: $(document).height()  //是获取整个页面的高度 $(window).height()  //是获取当前也就是浏览器所能看到的页面的那部分的高度.这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的 要获取顶端,只需要获取到scrollTop()==0的时候就是顶端: 要获取底端,只要获取scrollTop()>=$(document).heigh

判断滚动条滚到页面底部并执行事件

clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分. scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度. 举例,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1