快速回弹滚动

拼搏现实的明天。 2022-08-06 15:18 148阅读 0赞

我们先来看看回弹滚动在手机浏览器发展的历史：

- 早期的时候，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iScroll;

- Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动；

- Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；

- iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果

在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做：

<table style="font-size:16px; border-collapse:collapse; border-spacing:0px; width:750px; max-width:100%; color:rgb(90,90,90); border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; margin:0.3em 0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:auto!important; position:relative!important; right:auto!important; top:auto!important; min-height:inherit!important; background:none rgb(56,64,71)!important"> 
 <tbody style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
  <tr style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
   <td style="width:750px; border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; min-height:inherit!important; background:none!important"> 
    <div style="word-break:break-all; border:0px!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:relative!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">.xxx&nbsp;{ </code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(147,199,99)!important; background:none!important">overflow</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">:&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(0,153,0)!important; background:none!important">auto</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">;&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(102,116,123)!important; background:none!important">/*&nbsp;auto&nbsp;|&nbsp;scroll&nbsp;*/</code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">-webkit-overflow-scrolling:&nbsp;touch;</code> 
     </div> 
     <div style="border:0px!important; font-size:1em!important; margin:0px!important; padding:0px 1em!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; background:none!important"> 
      <code style="border:0px!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; margin:0px!important; padding:0px!important; vertical-align:baseline!important; bottom:auto!important; float:none!important; left:auto!important; line-height:2em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; width:auto!important; min-height:inherit!important; color:rgb(248,248,242)!important; background:none!important">}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：[http://www.idangero.us/sliders/swiper/index.php][http_www.idangero.us_sliders_swiper_index.php]

[http_www.idangero.us_sliders_swiper_index.php]: http://www.idangero.us/sliders/swiper/index.php