H5-移动端-textarea无法滚动问题

H5-移动端-textarea无法滚动问题

一、项目说明

H5项目，采用技术为vue，页面中使用的页面滑动插件是better-scroll（better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件）。

二、现象

在项目中，一个录入信息的页面中，使用了textarea，让文本能滚动输入或查看。在文本框中录入了足够多的文本以后，发现textarea无法滚动，滑动的时候，会触发整个页面的滚动，这样这个就达不到我们页面想要的效果了。

三、原因

原因就是因为在触发textarea滑动的时候，产生了冒泡事件，引起了整个页面的滑动，知道了原因以后就很好解决啦

四、解决

window.addEventListener('touchmove',function(e){
  let target = e.target
  if(target && target.tagName === 'TEXTAREA'){ 
    e.stopPropagation();
  }
},true)