如何实现可滚动的< div>在iPad上？ [英] How can I implement a scrollable <div> on iPad?

问题描述

我有一个使用可滚动< div> 的页面：

 < DIV style =OVERFLOW-Y：hidden; WIDTH：928px; OVERFLOW：scroll> 
 ...巨大的内容
< / div> 
  

现在，它在桌面浏览器上正常工作，我无法在iPad上滚动。 >

您能否提供一个解决方案（最好不使用Sencha等任何第三方框架）？

解决方案

我在这个小项目的帮助下取得了很好的成功： http： //cubiq.org/iscroll 。

向下滚动到如何使用。

EDIT ：

：

b
$ b

 < div id =wrapper> 
< div id =scroller> 
巨大内容... 
< / div> 
< / div> 
  

CSS ：

  #wrapper {
 position：relative; 
 z-index：1; 
 width：926px 
 height：200px; 
 overflow：hidden; 
} 
  

JavaScript ：

  function loaded（）{
 document.addEventListener（'touchmove'，function（e）{e.preventDefault（）;}）; 
 myScroll = new iScroll（'scroller'，{vScrollbar：false}）; 
} 
 
 document.addEventListener（'DOMContentLoaded'，loaded）; 
  

I have a page which uses a scrollable <div>:

<DIV style="OVERFLOW-Y: hidden; WIDTH: 928px; OVERFLOW: scroll">
...Huge Content
</div>

Now while it works fine in desktop browsers, I am unable to scroll on the iPad.

Could you please provide a solution (preferably without the use of any 3rd party frameworks like Sencha, etc.)?

解决方案

I've had good success with this problem with the help of this little project: http://cubiq.org/iscroll.

Scroll down to "how to use".

EDIT, try this for only horizontal scroll (using iScroll):

HTML:

<div id="wrapper">
    <div id="scroller">
        Huge Content...
    </div>
</div>

CSS:

#wrapper {
    position:relative;
    z-index:1;
    width: 926px
    height: 200px;
    overflow: hidden;
}

JavaScript:

function loaded() {
    document.addEventListener('touchmove', function(e){ e.preventDefault(); });
    myScroll = new iScroll('scroller', {vScrollbar:false});
}

document.addEventListener('DOMContentLoaded', loaded);

这篇关于如何实现可滚动的< div>在iPad上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！