自动IOS风格的HTML5滚动控件

ios上html5要做滚动, 可以用css实现, 用如下两句
overflow:scroll;
-webkit-overflow-scrolling:touch;
即可实现滚动, 不过目前这种控件有个小问题, 当滚动条停在最上方或最下方停止时, 再上拉或下拉, 不会滚动,而是将事件传递给了父容器; 另外,上面的css在android上没有弹性效果.
对于第一个问题,在ios上也有解决办法,即当用户开始触摸控件时,判断如果滚动位置在顶部,设置滚动位置在1像素,如果滚动位置在底部,设置滚动位置在底部像素-1
不过,目前的方式,还是只能让滚动用起来方便了,要做下拉刷新的话就真的没办法了.
所以我自己实现了一个滚动控件,效果基本上按ios的scroll控件做的, 可以做下拉的效果,而且ios和android效果一样.
可以扫下面的二维码试试.

页面地址:

http://www.hoverlees.com/diy/scroll.html

Leave a comment

Your email address will not be published. Required fields are marked *