原生js的scroll和touch事件

1.各属性的所代表的区域

网页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight 

网页可见区域宽：document.body.offsetWidth (包括边线的宽) 

网页可见区域高：document.body.offsetHeight (包括边线的宽) 

网页正文全文宽：document.body.scrollWidth  

网页正文全文高：document.body.scrollHeight  

网页被卷去的高：document.body.scrollTop  

网页被卷去的左：document.body.scrollLeft 

网页正文部分上：window.screenTop 

网页正文部分左：window.screenLeft 

屏幕分辨率的高：window.screen.height 

屏幕分辨率的宽：window.screen.width 

屏幕可用工作区高度：window.screen.availHeight 

屏幕可用工作区宽度：window.screen.availWidth 

各属性在不同浏览器下的差异及兼容问题：blog.csdn.net/lhjuejiang/…

2.touch事件

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 　

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 　　

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。  

3.每个touch事件包含的属性

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的唯一ID。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触目的DOM节点目标。

touch事件及属性详解：blog.csdn.net/lee_magnum/…

4.针对微信内置浏览器下拉出现网址的问题

window.addEventListener('touchmove', e => {
    e.preventDefault()
  },{ passive: false }
)
复制代码

通过上面的代码可以成功阻止微信内置浏览器的下拉出现网址的问题，但也会影响scroll事件。

故对e.preventDefault()事件添加判断条件：

下拉事件是在滚动条出现在页面顶部，touchmove时才出现，上面代码阻止了所有的touchmove触发的事件，这里只需要在touchmove的pageY>touchstartY,且document.body.scrollTop===0时阻止触发浏览器默认事件即可。

（document.body.scrollTop会有兼容性问题，改用document.documentElement.scrollTop || window.pageYOffset代替）

5.代码部分

  window.addEventListener('scroll', () => {      
    let scrollHeight = document.documentElement.scrollTop || window.pageYOffset      
    this.scrollHeight = scrollHeight      
    let dHeight = document.body.offsetHeight      
    let wHeight = window.screen.height      
    if (scrollHeight >= dHeight - wHeight) { 
    //滚动条滚动到页面底部        
      doSomething()      
    }    
  })    
  window.addEventListener('touchstart', e => {      
    this.startY = e.targetTouches[0].clientY      
    this.startPageY = e.targetTouches[0].pageY    
  })    
  window.addEventListener('touchmove', e => {      
    this.moveY = e.targetTouches[0].clientY - this.startY      
    this.movePageY = e.targetTouches[0].pageY - this.startPageY      
    // 当滚动条位于顶部，执行下拉操作时，阻止浏览器默认事件      
    if (this.movePageY > 0 && this.scrollHeight === 0) {        
      e.preventDefault()      
    }      
    if (this.movePageY < 150) {  //下拉距离小于150px
       this.pullDownMessage = '下拉刷新'      
    } else {        
      this.pullDownMessage = '释放立即刷新'      
    }    
  }, { passive: false })    
  window.addEventListener('touchend', e => {      
    this.endY = e.changedTouches[0].clientY      
    this.movePageY = e.changedTouches[0].pageY - this.startPageY
    if(this.endY-this.startY>150){ //手指离开屏幕时的位置与手指接触屏幕时位置相差150
        doSomething()
    }    
  }) 复制代码