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)
Logo

前往低代码交流专区

更多推荐