检测不同种类的滚动条(例如普通/隐藏的osx) [英] Detect different kind of scrollbars (eg. normal / hidden osx)
问题描述
使用响应式布局和大量CSS创建网页时，我遇到了隐藏或显示滚动条并将布局更改17px的问题.
主要问题是，在OSX上，滚动条将鼠标悬停在整个布局上而不影响它，但是例如在Windows的任何浏览器中，滚动条都是该布局的一部分，因此将其向左移动17px宽度. /p>
试图解决这个问题，我开始检测像这样的浏览器:
if($.browser.chrome) {
// adapt layout by 17px
} else if ($.browser.mozilla) {
// adapt layout by 17px
} else if ($.browser.safari) {
// dont adapt layout by 17px
}
但是在阅读了很多关于该主题的文章之后，我意识到很多人推荐检测功能，而不是检测浏览器. 那么有没有办法找出浏览器如何处理滚动条?它们是否将是页面布局的一部分，还是只是将它们悬停在诸如safari中的所有内容之上?
感谢您的帮助！
这很容易衡量.在可滚动元素上，滚动条的厚度仅是:
var scrollbarWidth = scrollableEl.offsetWidth - scrollableEl.clientWidth;`
大卫·沃尔什(David Walsh)很好地解释了 .滚动条的宽度/高度在以下位置为零:
-
OSX(除非已修改鼠标"设置，否则在Lion之前).
-
触摸设备浏览器(Android，iOS，Windows Phone).
-
平板电脑模式下的IE12 Edge(可动态更改，当平板电脑模式更改时，滚动条会显示和隐藏，并且页面会重新绘制.我认为可以通过注册resize事件并测试滚动条宽度来检测到更改.)
-
可由CSS更改，例如
::-webkit-scrollbar { width: 1em; }例如-ms-overflow-style: none(文档). -
如果元素尚未在文档中(可能是脚本在
<head>中运行吗?)，则可能为零.
其他说明:
-
Modernizr具有隐藏的滚动条功能检测，可检测是否使用了零宽度的滚动条.
-
高度差也应该衡量这一点，但是在IE8中并不可靠(尤其是由于缩放更改而在调整大小事件后不可靠)，因此我一直使用宽度差.
-
如果宽度不为零，它也可能由于以下原因而发生变化:(1)页面缩放更改(宽度在某些浏览器中与物理像素相同，因此逻辑像素也会发生变化. ，(2)样式更改，例如
-webkit-scrollbar，(3)桌面主题更改(主要主题或个性化主题的宽度不同).
以下是一些指向测试人员的链接:
-
一些简单的普通JavaScript代码(可能最好使div永久，以避免回流计算) .
-
Modernizr牛测试，如果scrollbarwidth为零，则AFAIK会将hiddenscrollbar设置为true(另请参见cssscrollbar).
Using responsive Layout and a lot of CSS to create a Webpage, I am having a problem with scrollbars being hidden or shown and changing the layout by 17px.
The main problem is that on OSX the scrollbars hover over the entire Layout without affecting it, but in any browser on Windows for example the scrollbar is part of the layout and therefore moving it to the left by its width of 17px.
Trying to solve this I started to detect browsers like:
if($.browser.chrome) {
// adapt layout by 17px
} else if ($.browser.mozilla) {
// adapt layout by 17px
} else if ($.browser.safari) {
// dont adapt layout by 17px
}
But after reading a lot of posts on that topic, I realized that instead of detect the browser many people recommend feature detection. So is there a way to find out how the browser is handling the scrollbars? Whether they will be part of the pagelayout or they will just hover on top of everything like in safari?
Thanks for your help!
This is easy to measure. On a scrollable element, the scrollbar thickness is simply:
var scrollbarWidth = scrollableEl.offsetWidth - scrollableEl.clientWidth;`
As explained very well by David Walsh. The scrollbar width/height is zero on:
OSX (unless the Mouse settings have been modified, or before Lion).
touch device browsers (Android, iOS, Windows Phone).
IE12 Edge in Tablet Mode (dynamically changeable, scrollbars show and hide and page redraws when Tablet mode is changed. I think the change is detectable by registering for the resize event and testing the scrollbar width).
Can be changed by CSS e.g.
::-webkit-scrollbar { width: 1em; }e.g.-ms-overflow-style: none(documentation).May be zero if element is not in document yet (also maybe if script running in
<head>?).
Other notes:
Modernizr has a hiddenscrollbar feature detection which detects if zero width scrollbars used.
Height difference should also measure this, but it wasn't reliable in IE8 (especially unreliable after resize event due to zoom change), so I have always used width difference.
If the width is non-zero, it can also change due to: (1) page zoom changes (width stays same as physical pixels on some browsers, therefore logical pixels changes. Although pinch-zoom acts differently), (2) Style changes like
-webkit-scrollbar, (3) Desktop theme changes (widths different for major themes, or personalized themes).
Here are some links to testers:
Some simple plain JavaScript code (probably better to make the div permanent to avoid reflow calcs).
Modernizr cow test which AFAIK gives hiddenscrollbar as true if scrollbarwidth is zero (also see cssscrollbar).
Some ugly jQuery code
这篇关于检测不同种类的滚动条(例如普通/隐藏的osx)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
