IOS的移动端H5页面滚动浏览器到底部或者在整个页面被往上拉的时候都会出现一个回弹的效果。
如果想禁止整个回弹效果,那么

首先、引入inobounce.js库,就可以禁止body的滚动

下载地址:
inobounce.js的github地址

其次、在需要滚动的元素上加上一下样式,就可以了

height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;

案例展示:

<style>
    ul {
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>9</li>
</ul>
<script src="inobounce.js"></script>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐