为“显示滚动条”设计 | CSS-Tricks

在 macOS 中，用户可以设置何时在窗口中显示滚动条。这会影响操作系统中的所有窗口，包括 Web 浏览器。他们有三种选择

根据鼠标或触控板自动显示
滚动时显示
始终显示

这意味着您要么处于始终看到滚动条的状态，要么处于仅在通过其他方式开始滚动后才看到滚动条的状态。

**始终显示**选项非常直观。如果窗口需要滚动，则滚动条会显示。如果不需要，则不会显示。如果滚动条存在，它会压缩页面以腾出空间。以下是一个示例，该示例说明了页面在使用**始终显示**设置时从需要滚动到不需要滚动的过程

这与**滚动时显示**选项不同，在**滚动时显示**选项中，滚动条会**覆盖**内容。以下是一个示例

这些屏幕截图是我想到这个问题的原因。我们在 CodePen 上收到了一位用户的来信，因为他们无法点击通知图标。在我添加了额外的空间来防止这种重叠之前，可能会出现一些覆盖

由于该用户会缩小页面，从而使目标更小，直至被完全覆盖，因此问题加剧了

这实际上只在可点击元素紧贴页面右侧时才需要考虑。如果这曾经成为您的问题，添加一些填充通常就足够了。或者，使可点击区域不限于那么窄的目标区域。在 WordPress 管理员中，可能会出现一些重叠，但可点击区域足够大，因此无关紧要

Juan Alvarado

# 2016 年 12 月 30 日

信息很好。还应该注意默认设置根据鼠标或触控板自动显示的行为，因为它可能比其他设置更频繁地出现。

仅使用触控板时，滚动条的行为将类似于重叠示例。但是，只要存在未识别为触控板的鼠标，滚动条的行为将类似于始终显示设置。

我最近没有使用魔法鼠标，因此我不确定它的具体行为，但这可能是一个需要考虑的因素。不过，在这一点上，它们只是边缘情况。

Jakob E

# 2016 年 12 月 30 日

还要注意，视窗单位（当设置为始终显示时）包含滚动条 - 如果您有一个宽度为 100vw 的元素，则会导致水平滚动。

body {
  height: 102vh; // force vertical scroll
  width:  100vw; // show scroll bars 'always' will cause horizontal scroll 
}

html { 
  overflow-x: hidden; // prevent horizontal scroll 
}

祝大家新年快乐 :-)

Mike

评论永久链接# 2017 年 1 月 3 日

哇，这太有意思了。我们在用户体验测试中不知何故忽略了这一点。

Lewis Cowles

# 2016 年 12 月 30 日

我不明白... 我总是使用 jQuery nicescroll 在滚动元素上覆盖浏览器滚动条（它将 overflow 设置为隐藏）。

https://gist.github.com/Lewiscowles1986/d6339f0b33aa3871b947110c4ee70fb6

当然，用户可以喝设置漂白剂，操作系统会造成损害，浏览器供应商会试图帮助最终却造成损害，但这是您的网站。在某个时刻，您也需要说“这不是我的问题，我正在尝试改变天气或控制太阳。”

当然，使用 JS 和 CSS，您可以在可能的情况下进行控制并进行控制以进行增强，但这不是我们的责任。

efraim

评论永久链接# 2016 年 12 月 30 日

哦... 很抱歉要说，但我立即离开任何使用那种糟糕的滚动劫持自定义滚动东西的网站。感觉太怪异和不自然了。这实际上是用一个更大的问题来取代一个小的问题。
Marakoss

评论永久链接# 2016 年 12 月 30 日

正如 efraim 所说。使用 jQuery nicescrolls 会提供最糟糕的用户体验。它甚至无法与默认系统滚动条的响应能力相提并论。苹果的触控板比鼠标滚轮快得多地触发滚动事件，nicescrolls 插件无法处理这种情况。
kellengreen

评论永久链接# 2016 年 12 月 30 日

同意，对我来说，js 滚动始终感觉“不正常”。
Agop

评论永久链接# 2016 年 12 月 31 日

当然，使用 JS 和 CSS，您可以在可能的情况下进行控制并进行控制以进行增强，但这不是我们的责任。

自定义滚动条完全与“增强”背道而驰。例如，您一定已经意识到您的网站有多迟钝，对吧？是那些自定义滚动条造成的。
Grsmto

评论永久链接# 2017 年 1 月 5 日

伙计们，只用 SimpleBar 就好了 :)
https://github.com/Grsmto/simplebar

Brendan Patterson

# 2016 年 12 月 30 日

被这抓到的人数，还有当你向他们展示如何使用触控板或魔法鼠标使它们消失时！

如果您想使用媒体查询，值得注意的是 js，假设您也使用 modernizr，modernizr.mq (https://modernizr.com/docs#modernizr-mq) 会获取正确的宽度（有或没有滚动条），而 $( window ).width(); 则不会。

antwon

评论永久链接# 2017 年 1 月 3 日

此外，Modernizr 还可以检查 hiddenscroll，您可以使用它来偏移紧贴页面右侧的元素。

Mark

# 2016 年 12 月 30 日

是的，我们都应该完全重新设计我们的网站，因为这是一个对可选功能的愚蠢实现。因为当然，苹果永远不会错，所以需要改变的是网站。

MaxArt

评论永久链接# 2016 年 12 月 31 日

请记住，在移动设备上，滚动条通常只在主动滚动时才会出现。您不能再认为经典的行为是理所当然的了。
Mark

评论永久链接# 2016 年 12 月 31 日

即使在移动设备上，您仍然可以点击最边缘的某个东西。macOS 滚动条是苹果设计上的缺陷。

Benjamin

# 2017 年 1 月 1 日

很抱歉要说，但我从来没有遇到过这个问题，我已经使用 macOS 超过 6 年了

Vanderson

# 2017 年 1 月 1 日

我认为对浏览器进行任何非常自定义的修改（例如这种修改）都是互联网上的一种暂时性的时尚。例如，IE5（是的，我是一个老古董）允许对滚动条进行着色。

我喜欢 Mac 将 USB 端口向前推（还记得并行端口吗？）以及很多其他技术。但他们也同时向我们推出了一个按钮的鼠标。叹息

这等同于一个按钮的鼠标。我讨厌用那种设置使用滚动条太难了。任何使用它的人都会遇到与一个按钮鼠标用户遇到的相同问题。最终，功能将战胜形式。

如果您是那种必须以形式为主的人，那么也许某些东西对您来说功能不正常也没关系，也许最终您的沮丧会将您拉回到功能方面。（一个按钮的鼠标/彩色滚动条）

此评论线程已关闭。如果您有重要的信息要分享，请联系我们。