IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果,底部会出现一块空白。
想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式。
直接引入就行
<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>