假设您使用的是 iOS5.0 或更高版本,则需要使用以下代码:
-webkit-overflow-scrolling: auto
(这是默认样式)
auto:无惯性的单指滚动。
另外一个可用的样式是
-webkit-overflow-scrolling: touch
touch:本地风格的滚动。指定此样式会产生堆叠上下文(例如不透明度、蒙版和转换)的效果。
使用 touch
模式,当用户触摸并滚动时,滚动条将可见,但在不使用时会消失。如果您想让它始终可见,则可以参考这篇旧文章:
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
另一段由@BJMC编写的Thumb代码:
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
编辑:关于这个演示的行为,你应该使用jQuery,因为它会帮助你很多。使用$(document).ready(function(){//your code with timer})
代码和计时器后,需要在期望的时间(比如5秒)后将CSS属性重置为正常状态。
对于你所描述的演示,它是通过onhover
事件启动的,请查看我为此创建的fiddle。
这在桌面浏览器中可以复现结果,并且也适用于iPad,只需添加你的计时器代码以满足你的需求即可。
-webkit-overflow-scrolling: touch
,直到开始滚动之前我看不到滚动条。 - Sam Hasleroverflow: scroll
的功能与预期相符,即允许用一个手指在div
的尺寸范围内上下滚动。但是可滚动的overflow: scroll
在 x 轴上不能按预期工作? - GreySage代码:
$(document).ready(function() {
$("html").niceScroll({styler:"fb",cursorcolor:"#000"});
$("#divexample1").niceScroll();//or styles/options below
$("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
$("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
});
-webkit-overflow-scrolling: touch
,::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
按照惯例,在iOS上不使用滚动条。
对于具有overflow: scroll
属性的div,唯一的本地滚动方式是使用两个手指。
您可以查看iScroll,这是一个JavaScript库,它处理触摸事件并为div实现单指动量滚动(用户通常在本机应用程序中期望的)。
在 iOS5 之前,您无法滚动内部 div - 因此,当您尝试滚动时,您可能看不到滚动条,因为没有滚动条。
我还没有在 iOS5 上进行测试,但据说现在可以滚动内部 div。
如果它不是内部 div,则应该能够在仅滚动时看到滚动条 - 这不仅适用于 iOS - lion 也已经摆脱了所有本地滚动条。只有在窗口滚动或窗口首次加载时才能看到它们。
height: 8px;
。 - Utku