vue页面滚动和textarea滚动冲突问题 ,better-scroll和textarea滚动冲突解决

最新推荐文章于 2025-03-28 11:39:19 发布
原创 最新推荐文章于 2025-03-28 11:39:19 发布 · 2.2k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
1 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了一个简单的JavaScript解决方案，用于防止触摸设备上textarea元素的意外滚动。通过监听touchmove事件并阻止其冒泡，确保了在触摸textarea时，仅textarea本身响应滚动操作。

//将代码放入全局 ,可解决所有界面中textarea不滚动问题

window.addEventListener('touchmove', function(e) {  
                        var target = e.target;  
                        if (target && target.tagName === 'TEXTAREA') {//textarea阻止冒泡  
                            e.stopPropagation();  
                        }  
                    }, true)

textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法
12-13
在IE下文本框textarea会显示滚动条（如下：） 去掉textarea横向或纵向滚动条办法： <textarea style="overflow:hidden"></textarea> 可以通过overflow-x:hidden和overflow-y:hidden控制横向和纵向滚动条 要设置textarea文本域的滚动条是否开启，使用style.overflow-x属性来控制。如：如果要隐藏该文本域的横向滚动条，在style属性中增加overflow-x属性控制，如下： <textarea id=txtComments style="overflow-x:hidden"></textare
【问题记录】解决滑动冲突问题 - 监听滑动事件，阻止滑动事件冒泡
Kuroko's Development Notes
09-17 2460
vue @touchend.stop 轻松解决滑动事件冒泡问题。当滚动内容与页面滑动冲突时，如何阻止滑动事件冒泡？通过监听滑动事件解决事件冲突或冒泡！
完美解决vue项目中弹出框滑动时，内部页面也跟着滑动问题
此去经年的博客
10-18 1565
原文地址https://www.jianshu.com/p/60db6cf91a69 在main.js中设置全局函数： //弹出框禁止滑动 Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.over...
vue弹窗后如何禁止滚动条滚动
qq_48294048的博客
05-08 4828
1、在有弹出框的页面中，加上以下方法，弹出框出现时调用禁止滚动方法stopScroll()，弹出框去掉是调取允许滚动方法canScroll()即可，代码如下。
VUE vant组件 popup弹出层向下滑动时和下拉刷新冲突
我想请你吃糖的博客
06-10 2384
首先先介绍一下使用组件 下拉刷新用的是<van-pull-refresh>组件 <van-pull-refresh class="refresh-container" v-model="refreshLoading" @refresh="handleRefreshLoading" success-text="刷新成功" > </van-pull-refresh> 弹出层用的是<van-popup>
文本域textarea与页面滚动相互冲突解决办法
weixin_42326052的博客
09-09 1311
应用场景 在页面中的textarea文字内容比较长的情况下通常需要滚动浏览，这时如果页面上有滚动的话就会冲突，本质上就是冒泡事件，所以我们只需要阻止文本域的冒泡事件即可。在页面中或全局加上如下代码即可： window.addEventListener('touchmove', function(e) { let target = e.target; if (target && target.tagName === 'TEXTAREA') { e.stopPropaga
vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新
xixi的博客
07-20 2043
遇到的问题：vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新。1.van-pull-refresh加上disabled，限制它是否可以滚动。2.添加事件监听滚动，获取滚动距离，设置disabled。
Vue 中使用消息总线让两个滚动条同步滚动
lee576的专栏
03-04 1684
最近自己从零撸起的甘特图组件需要子组件的滚动条同步滚动 这就涉及到子组件之间的互相通信，通过 消息总线可以达到我们的需求 ,首先建立一个标志位，拖动左边滚动条的时候，右边的滚动条事件不处理，反之拖动右边滚动条时，左边的滚动条事件不做处理，建立一个公共的变量用于两者的互斥 store.js import Vue from 'vue' export let store = Vue.observable({ scrollFlag: true }) export let mutations =..
vue--解决多个页面之间滚动互相影响的问题
Ada_lake的博客
09-03 4733
页面在点击跳转到新页面时可能会出现: 新页面的当前所在位置是原页面滑动到的位置，影响用户体验 解决方案 https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html router 内添加 scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } ...
2-BetterScroll中出现的问题
sinat_36048532的博客
12-03 226
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201203001020151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MDQ4NTMy,size_16,color_FFFFFF,t_70在这里插入图片描述 图片是异步记载的，图片没来之前会计算出一个可以滚动的区域，而图片来了之后呢也会
scrollbar的属性及样式分类:css
命由己造，相由心生
05-29 2584
scrollbar的属性及样式分类:css     1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）    overflow-x水平方向内容溢出时的设置    overflow-y垂直方向内容溢出时的设置    以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置
better-scroll.js文档
汇而不置的博客
04-09 1万+
better-scroll 介绍 better-scroll 是什么 better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。better-scroll 是基于原生 JS 实现的，不依赖任何框架。它...
mui滚动条与textarea自身滚动冲突
Rm_and_Rf的博客
08-12 759
用了MUI的滚动条之后页面中的div区域实现了滚动效果，但是div区域内的文本框如果输入多行内容则无法滚动，原因有可能是被父级div的滚动效果覆盖了 解决办法： window.addEventListener('touchmove', function(e) { var target = e.target; if (target && target....
微信小程序textarea标签内容不随页面滚动
qq_40471785的博客
07-15 1302
第一种方法： 去掉textarea所有父级元素的overflow属性。 第二种方法： 页面写一个div用来与textarea交替显示，点击div元素的时候显示textarea，并自动聚焦，失去焦点隐藏textarea，显示div。注意要用v-show显示、隐藏元素。 ...
Vue中textarea的使用：
热门推荐
SunPeng的博客
02-14 1万+
Vue中textarea的使用：
解决Vue中多个页面间滚动会相互影响的问题
最新发布
前端程序猿的博客
03-28 648
在使用vue开发页面总是会发现一个页面滚动之后跳转到另一个页面，新页面还是在上个页面滚动的位置，会大大影响用户体验。在进入页面时手动将页面位置重置到顶部，可以。
移动端滚动穿透问题解决方案
大灰狼的小绵羊哥哥的博客
12-03 378
一、 问题描述 移动端当position:fixed的弹窗弹出时，滑动弹窗，下层的页面会跟随滚动 二、 解决方案 1. body 设置overflow: hidden; 当弹窗弹出时，设置body元素的overflow属性为hidden，暴力去除滚动。 缺点：会丢失页面的滚动位置，需要使用js进行还原 // CSS .modal-open { overflow: hidden; ...
Vue中如何进行滚动加载与无限滚动
stormjun的博客
10-03 6070
Vue.js提供了强大的工具和技术，使滚动加载和无限滚动的实现变得相对简单。通过示例代码和本文提供的指南，您可以轻松入门并在Vue项目中实现这一令人印象深刻的用户体验功能。希望这篇文章对您有所帮助，如果您有任何问题，请随时向我们提问。
html 右侧滚动条,html中去掉textarea右侧滚动条和右下角拖拽
weixin_29157533的博客
05-30 806
摘要 腾兴网为您分享:html中去掉textarea右侧滚动条和右下角拖拽，湘税社保，唯品会，上海交通，钱大掌柜等软件知识，以及玫瑰小镇魔法花园，raw格式转换软件，阳光天天购，live壁纸，废品机械师补丁，itunes，笑傲江湖ol,winkeyfinder，骚白头像，邢台育才中学，导航条，清库，中国古筝网，我的世界中世纪城堡，友鱼商城等软件it资讯，欢迎关注腾兴网。textarea的属性是可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值