在Safari浏览器上强制显示滚动条

Question

在Safari浏览器上强制显示滚动条

htmlcss

18

有没有一种方法可以强制在Safari Lion上显示垂直滚动条。它只会在您单击页面的最右侧时显示。我有一个元素，其中我设置了overflow-y:auto，但在Safari中，它只有在单击元素边缘时才显示。

- Chapsterj

它是 overflow-y:scroll。 - Joseph

我指的是Safari而不是其他浏览器。我已经尝试过这个，但是在Lion中的Safari会隐藏滚动条，直到你点击元素的右侧。 - Chapsterj

2个回答

-3

应用overflow-y到html元素。

html {
    overflow-y:scroll;
}

- rebz

1

我尝试过了，但对于Safari不起作用。这适用于所有其他浏览器，但是在Lion的Safari中，滚动条会隐藏，直到您单击元素的右侧边缘才会出现。 - Chapsterj

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chapsterj · Accepted Answer

我在这个网站上找到了这个内容 http://css-tricks.com/custom-scrollbars-in-webkit/ 这会使其在Safari Lion中显示出来。

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: rgba(57,57,57, .6);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(156, 156, 156, .6);
}

显然，您需要更改属性以适合您想要的内容。同样这是为Safari准备的，因为 overflow-y: scroll; 不能强制显示滚动条。


如果您想将此分配给特定元素上的滚动条，则可以在其前面添加任何CSS选择器：
.mydiv::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

.mydiv::-webkit-scrollbar-track {
    background-color: rgba(57,57,57, .6);
    border-radius: 8px;
}

.mydiv::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(156, 156, 156, .6);
}