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)
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容