inobounce.js : 禁止IOS H5的滑动回弹

最新推荐文章于 2025-03-12 15:25:50 发布

weixin_30610755

最新推荐文章于 2025-03-12 15:25:50 发布

阅读量5.5k

点赞数

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/haqiao/p/10417366.html

版权

本文介绍了一种在iOS移动端/H5/webapp页面中取消底部回弹效果的方法，通过引入inobounce.js库简化操作，同时提供了如何保持页面内元素滑动不受影响的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉，都会出现一个回弹的效果。

想取消这个效果可以引入一个简单的库就行，不用再写繁琐的样式。

github地址

直接引入就行

<script src="inobounce.js"></script>

例子：

因为这个库是禁止了整个页面的滑动，所以如果页面中有其他元素需要滑动的，要给滑动元素设置一个height或max-height,还有overflow: auto; -webkit-overflow-scrolling: touch;

<style>
    ul {
        height: 115px;
        border: 1px solid gray;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
</style>

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
    <li>List Item 6</li>
    <li>List Item 7</li>
    <li>List Item 8</li>
    <li>List Item 9</li>
    <li>List Item 10</li>
</ul>

转载于:https://www.cnblogs.com/haqiao/p/10417366.html