结果整个页面都无法滑动,不是我要的效果。如果是有页面不要滑动的那种可以尝试。
使用 vue-bounce 来解决,也没啥用。不知道是不是我打开的方式不对。
安装
使用指令
PS :又尝试了一下,还是有点效果的。就是在顶部进行下拉时会禁用掉 touchmove 事件,但是效果还是不好。因为我可能先往下滑滑不动又往别的方向滑。
灵光一闪,想问下 IOS 端的同学能不能把弹性关了,他给出的解决方案,结合我们 native 端使用了 flutter,给出方案:
我让 native 端的同学进行尝试,结果据 flutter 端同事回复,这个开关只关闭了页面整体边缘的橡皮筋效果,对于 H5 内 div 的边界弹性效果无效。
网上找的方案,明显不对味。
没什么用……感觉这个是解决页面整体弹性滑动的。
使用一个新的 CSS 属性来实现
结果,依旧不行。
使用 https://github.com/lazd/iNoBounce 来阻止回弹效果,发现效果应该是和 vue-bounce 一样,在用户直接拖拽边缘的时候禁用移动行为,但依然存在来回滑动没反应的情况。
最后通过自己写拖拽滑动,的确解决了这个问题。解决方案在 解决 IOS 13+ H5 滑动边界橡皮筋弹性效果
一文中。
1.H5网页touch滑动的时候在苹果手机上出现不流畅的问题
-webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果.
解决办法:给所有网页添加如下样式
说明:
-webkit-overflow-scrolling: touch当手指从触摸屏上移开,会保持一段时间的滚动
-webkit-overflow-scrolling: auto当手指从触摸屏上移开,滚动会立即停止
2. css 苹果手机按钮默认样式如何去掉
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none}
textarea { -webkit-appearance: none}
3. 如果还有圆角的问题,
** 4.苹果手机不支持box-shadow属性**
如果先给input写边框,用 border:1px solid #ccc
5、去除Chrome等浏览器文本框默认发光边框
6.去掉高光样式:
当然这样以来,当文本框载入焦点时,所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了,这样的话,当文本框载入焦点时,边框颜色就会变为橙色,给用户一个反馈。
7、去除IE10+浏览器文本框后面的小叉叉,只需下面一句就ok了
input::-ms-clear {display: none}
8.H5页面写出来,在chrome中出现如下错误,只需添加如下css即可解决
*{touch-action: pan-y}
CSS 禁止滚动条,有4种方法,具体如下:
1、完全隐藏在<boby>里加入scroll="no",可隐藏滚动条;
<boby scroll="no">
2、在不需要时隐藏
指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条;
反之,则显示;
<boby scroll="auto">
3、样式表方法
在<boby>里加入style="overflow-x:hidden",可隐藏水平滚动条;
加入style="overflow-y:hidden",可隐藏垂直滚动条。
被包含页面里加入
<style>
html { overflow-x:hidden }
</style>
4、另一种方法
<style type="text/css">
body {
overflow-x:hidden
overflow-y:hidden
}
</style>
<style type="text/css">
html {
overflow-x:hidden
overflow-y:hidden
}
</style>