开发一个 iPad 网站我尝试使用 CSS 属性 overflow: auto 来获取 div 中需要的滚动条，但即使两个手指滚动工作，我的设备也拒绝显示它们。
我试过了
overflow: auto;
和
overflow: scroll;
结果是一样的。
我只在 iPad 上进行测试（在桌面浏览器上完美运行）。
有什么想法吗？
【问题讨论】：
编辑，请在kritzikratzi 留下的评论之后：
[开始] ios 5beta 可以添加一个新属性
-webkit-overflow-scrolling: touch，这应该会产生预期的行为。
一些，但很少，进一步阅读：
原始答案，留给后人。
不幸的是，overflow: auto 或 scroll 都不会在 iOS 设备上产生滚动条，显然是因为屏幕宽度会占用这些有用的机制。
相反，正如您所发现的，用户需要执行两指滑动才能滚动overflow-ed 内容。唯一的参考，因为我找不到手机本身的手册，我可以在这里找到：tuaw.com: iPhone 101: Two-fingered scrolling。
我能想到的唯一解决方法是，您是否可以使用一些 JavaScript，也许是 jQTouch，为overflow 元素创建自己的滚动条。或者，您可以使用@media queries 删除overflow 并完整显示内容，作为iPhone 用户，这得到了我的投票，即使只是为了简单。例如：
<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />
前面的代码来自A List Apart，来自上面链接的同一篇文章（我不确定他们为什么离开type="text/css"，但我认为是有原因的。
【讨论】：
iScroll4 javascript 库将立即修复它。它有一个hideScrollbar 方法，您可以将其设置为false 以防止滚动条消失。
【讨论】：
Chris Barr here提供的解决方案
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
对我来说很好用。如果您需要使用一些点击，请删除 event.preventDefault...
【讨论】：
根据我的经验，您需要确保该元素有 display:block; 申请 -webkit-overflow-scrolling:touch; 才能工作。
【讨论】：
SO 上的其他 2 个人提出了可能的纯 CSS 解决方案。 David Thomas 的解决方案是完美的，但存在滚动条仅在滚动期间可见的限制。
为了让滚动条始终可见，可以遵循以下链接中建议的指南：
【讨论】：
我已经做了一些测试并使用 CSS3 重新定义滚动条的工作原理，你可以保留你的 Overflow:scroll; 或 Overflow:auto
我最终得到了这样的东西......
::-webkit-scrollbar {
width: 15px;
height: 15px;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #C3C3C3;
border: 2px solid #eee;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}
我还没有弄清楚的唯一缺点是如何与 iProducts 上的滚动条交互，但您可以与内容交互以滚动它
【讨论】：
::-webkit-scrollbar 不适用于 iPhone 4/iOS 7。
在你的 CSS 中应用这段代码
::-webkit-scrollbar{
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
【讨论】：
确保你的 body 和 div 没有
position:fixed
不然就不行了
【讨论】：
如果您尝试在移动设备上实现水平div滚动，更新后的CSS修复不起作用（在Android Chrome和iOS Safari多个版本上测试），例如：
-webkit-overflow-scrolling: touch
我找到了一个解决方案，并在 CSS 技巧之前将其修改为水平滚动。我已经在 Android Chrome 和 iOS Safari 上测试过，并且监听器触摸事件已经存在很长时间了，所以它有很好的支持：http://caniuse.com/#feat=touch。
用法：
touchHorizScroll('divIDtoScroll');
功能：
function touchHorizScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollLeft+event.touches[0].pageX;
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollLeft=scrollStartPos-event.touches[0].pageX;
},false);
}
}
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
从垂直解决方案修改（前 CSS 技巧）：
http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/
【讨论】：
对我来说很好，请尝试：
.scroll-container {
max-height: 250px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
【讨论】：
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #C3C3C3;
border: 2px solid #eee;
}
使用此代码，它可以在 ios/android APP webview 中运行；它删除了一些不可移植的css代码；
【讨论】：