手机移动端 overflow 无效使用 iScroll解决

——四叶草

已于 2022-10-24 09:30:43 修改

阅读量2.2k

点赞数

文章标签： javascript 前端 vue.js 1024程序员节

于 2022-09-09 16:01:57 首次发布

本文链接：https://blog.csdn.net/qq_515023980/article/details/126783557

版权

移动端局部实现上下滑动 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版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。