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/

相关文章:

JavaScript 变量变量

javascript - 将此颜色匹配游戏更改为js和jquery中的图像匹配

javascript - 在循环中随机更改innerHTML颜色

javascript - 在页面刷新期间调用不同的函数并关闭 javascript

javascript - 像我一样进行排序时,如何显示产品中的所有数据?

javascript - JS中的Angular2组件通信

javascript - 用以下点在DIV中隐藏多余的内容

javascript - 将随机数放入div,然后依次删除div。如何?

jquery - 将 jquery 选择限制为特定形式

html - Retina - 设备像素比与图像大小之间的相关性?