防止MacOS触控板用户在WebKit/Blink中隐藏滚动条
防止MacOS触控板用户在WebKit/Blink中隐藏滚动条
提问于 2011-10-22 05:40:44
WebKit/Blink (Safari/Chrome)从10.7 ( MacOS )开始在MacOS上的默认行为是在触控板用户不使用时隐藏滚动条。This can be confusing；滚动条通常是元素可滚动的唯一视觉提示。
示例(jsfiddle)
HTML
<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}WebKit (Chrome)屏幕截图
Presto (歌剧)截图
如何在WebKit中强制滚动条始终显示在可滚动元素上？
回答 4
Stack Overflow用户
发布于 2013-02-18 20:46:56
对于一个只有一页的web应用程序，我动态地添加可滚动的部分，我通过编程向下滚动一个像素并向上滚动来触发OSX的滚动条：
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);这会触发视觉提示淡入淡出。
Stack Overflow用户
发布于 2017-10-26 01:06:47
下面是一小段代码，可以在整个网站上重新启用滚动条。我不确定它是否与当前最流行的答案有很大不同，但它是这样的：
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}可通过以下链接找到：http://simurai.com/blog/2011/07/26/webkit-scrollbar
Stack Overflow用户
发布于 2011-10-22 15:28:16
浏览器滚动条在iPhone/iPad上完全不起作用。在工作中，我们使用像jScrollPane这样的自定义JavaScript滚动条来提供一致的跨浏览器UI：http://jscrollpane.kelvinluck.com/
它对我来说工作得很好-你可以制作一些非常漂亮的自定义滚动条来适合你网站的设计。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7855590
复制相关文章
相似问题