JS 原生JS 判断滚动条滑动到底部(兼容苹果safari)

  ListenerScoller () {
    var pageIndex = 1;
    var startX, startY;
    document.addEventListener(‘touchstart‘,function (ev) {
      startX = ev.touches[0].pageX;
      startY = ev.touches[0].pageY;
    }, false); 

    let _this = this;
    document.addEventListener(‘touchend‘,function (ev) {
      var endX, endY;
      endX = ev.changedTouches[0].pageX;
      endY = ev.changedTouches[0].pageY;
      var dy = startY - endY;
      var reach = Boolean;
      var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

      console.log(scrollTop);
      document.documentElement.scrollHeight == document.documentElement.clientHeight || document.body.clientHeight(兼容苹果safari) + scrollTop ? reach = true : reach = false
      console.log(reach)

      if(dy>30 && reach){
        pageIndex++;
        _this.setState({
          isLoad:true
        })

      _ENV.post(_ENV.HOST+‘/distributor/ticket-record?page=‘+pageIndex).then(data => {
        let newData = data.data.list;
        let original = _this.state.buys;
        if(data.data.isLastPage){
          _this.setState({
            loadText:‘没有更多数据‘
          })
        }
        let arr = original.concat(newData);
        console.log(arr);
        _this.setState({
          buys:arr
        });
      }).catch(error=>{
        console.log(error);
      });
    }

    }, false);
}

  

时间: 2024-10-24 03:31:27

JS 原生JS 判断滚动条滑动到底部(兼容苹果safari)的相关文章

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

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

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

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

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

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

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

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

html判断滚动条是否到达底部

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <

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

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

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

首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop.  clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度.        offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分.        scrollTop:这个是什么呢?他可以理解为滚动条可

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

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

页面滚动条滑动至底部加载信息

$(window).scroll(function(){   var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度  var scrollHeight = $(document).height();   //当前页面的总高度  var clientHeight = $(this).height();    //当前可视的页面高度  // console.log("top:"+scrollTop+",doc:"+sc