移动端局部实现上下滑动 overflow: scroll / auto ; overflow-y : auto / scroll; 都不行
overflow: visible 默认值。内容不会被修剪,会呈现在元素框之外。
overflow: hidden 内容会被修剪,并且其余内容是不可见的。
overflow: scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
overflow: auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
overflow: inherit 规定应该从父元素继承 overflow 属性的值。
使用 Iscroll 解决 文件太长请自行去官网下载适合自己的
实现效果图
我是vue 项目 在index.html 添加
其他项目参考官方文档
<head>
...
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper');
}
</script>
</head>
...
<body onload="loaded()">
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
</body>
overflow:hidden 必须加 ,使用 position:absolute; 能解决大多数不支持的情况。父div固定高度
<div style="position:absolute;overflow:hidden;max-height: 280px;width: 69%;" id="iScroll_TheMessage">
<div style="padding:0 5px;">
<div v-for="(item,index) in theMessage" :key="index" style="margin-top: 10px;margin-bottom: 4px;">
</div>
</div>
</div>
在需要的地方直接通过 id来使用,使用iScroll确保需要滑动的地方是三层结构 如上 代码
setTimeout(() => {
this.myScroll = new IScroll("#iScroll_TheMessage", {
mouseWheel: true, // 鼠标滚轮控制
scrollbars: true, //滚动条的显示
});
}, 300);
如果你有一个复杂的DOM结构,最好适当的延迟,再去初始化iScroll。最好给浏览器100或者200毫秒的间隙再去初始化iScroll。
在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存。
this.myScroll.destroy();
Iscroll 版本库 中文文档
懒得下载的,我已经帮忙下载好了,压缩包里面是全部版本(0积分免费下载)。 iSroll下载
iscroll 一共有五个版本 : iscroll-lite.js 只支持上下滑动,没有滑动条。
iscroll.js,这个版本是常规应用的脚本。它包含大多数常用的功能,有很高的性能和很小的体积。
iscroll-lite.js,精简版本。它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
iscroll-probe.js,探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。
iscroll-zoom.js,在标准滚动功能上增加缩放功能。
iscroll-infinite.js,可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。