javascript - Chrome 滚动条消失(不是 overflow-y)

标签 javascript jquery html css google-chrome

页面(live-version) (大致)由三部分组成:

  • 左侧边栏
  • 内容居中
  • 右侧边栏

右侧边栏应该是可滚动的,所以我设置了overflow-y: scroll; right: -17px; 简单地隐藏滚动条。 Body, htmloverflow-y: auto;。这样我就不必有两个滚动条(用于页面和右侧边栏)。

问题: (仅在 CHROME 中,在版本 62 和 63 上测试)

出于某种原因,在不同的机器上,chrome 为我提供了两种不同的滚动条样式:Case 1Case 2 .

所以基本上,对于情况 1右侧边栏滚动条 是“绝对定位的”并且页面因此隐藏了 17px 本身,而对于情况 2 滚动条“相对定位”,页面隐藏滚动条占用的 17px。

问题

1)为什么相同操作系统和浏览器版本,不同机器滚动条不同?

2) 有什么办法可以不用任何插件来解决这个问题吗?考虑到 Windows 用户有情况 2,而 MacOS 用户有情况 1 或 2

最佳答案

1) Why scrollbars are different on the same OS and browser version, but different machines ?

这可能与 macOS 上的系统设置有关。

macOS scroll bar OS settings

如果您选择了Always,我很确定滚动条会将页面内容推开。如果您连接了鼠标,则相同。否则,它具有您提到的“绝对定位”行为。请记住,Windows 用户可能会看到类似于 Always 的行为。

2) Is there any way to fix this without any plugins ? Taking into consideration Windows users have the case 2 and MacOS users either case 1 or 2 ?

好吧,首先要有一点意见:我认为隐藏滚动条而不向用户提供另一个提示来传达元素的可滚动性不是一个好主意。无论如何,除此之外,我想不出任何不是某种 hack 的东西,但这里有:

因为这是只需要执行一次的东西,并且假设我们想要跨浏览器和操作系统的可预测功能,您可以在这里使用一些 JS。在保留侧边栏的系统上,侧边栏元素的 offsetWidthscrollWidth 属性将不同。默认情况下,您的元素可以具有以下样式:

$child-h-padding: 15px;
$max-scrollbar-width: 35px;

.r-sidebar {
  overflow-y: scroll;
  padding: 12px $child-h-padding;
  ...rest
}

.r-sidebar--r-padded {
  padding-right: $child-h-padding + $max-scrollbar-width;
  right: -$max-scrollbar-width;
}

您可以根据 offsetWidthscrollWidth 的值添加/删除 .r-sidebar--r-padded 类。

应该无处不在,无论浏览器/操作系统如何。我已经在 macOS/Chrome 上使用两个侧边栏设置进行了测试。

关于javascript - Chrome 滚动条消失(不是 overflow-y),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47995597/

相关文章:

c# - 如何避免在 ASP.NET 代码隐藏中编写困惑的 JavaScript?

javascript - 如何在按键时将字符附加到 JavaScript 中文本框/文本区域中的选定文本

javascript - AngularJs Select通过PHP生成

javascript - 如何删除类并添加另一个类jquery

jquery - 将图像调整为 div 的 100% 高度并保持纵横比

jquery - 有没有办法在同一时隙中在其他事件后面全 Angular 显示 FullCalendar 事件?

javascript - tinyscrollbar 内的 Accordion

javascript - Angular 2自定义事件未被模板捕获

html - 如何为 SVG 中的路径元素着色?

javascript - Bootstrap Popover 一键工作 - JavaScript