CSS：可能“推” Webkit滚动条到内容？ [英] CSS: Possible to "push" Webkit scrollbars into content?

问题描述

通常，滚动条的位置如下：

Normally a scrollbar is positioned like this:

________________________________________
|                          |           |
|         content          | scrollbar |
|                          |           |
|                          |           |
|                          |           |
|                          |           |
|__________________________|___________|

我基本上希望在自定义滚动条和可滚动容器：

I'm basically looking to have a gap between a "custom" scrollbar and the outer boundary of a scrollable container:

________________________________________
|                    |           |     |
|      content       | scrollbar | gap |
|                    |     <     |     | 
|                    |           |     |
|                    |           |     |
|                    |           |     |
|____________________|___________|_____|

使用 margin-right code> :: - webkit-scrollbar 或 :: - webkit-scrollbar-track-piece Webkit状态的可滚动滚动条：

Using a margin-right on either ::-webkit-scrollbar or ::-webkit-scrollbar-track-piece fails and the announcement of the style–able scrollbars for Webkit states:

沿滚动条的轴支持边距。它们可以是
否定的（例如，轨道可以膨胀以部分覆盖
按钮）。

Margins are supported along the axis of the scrollbar. They can be negative (so that the track can for example be inflated to cover the buttons partially).

我现在想知道是否有人已经设法通过除了 margin 之外的其他方式将滚动条推入内容（或者从包装器中移出）。

I'm now wondering if anyone has managed to push the scrollbars "into" the content (or out of the wrapper for that matter) by some other means than margin.

我假设这可能只有（即使）使用某种技巧 - 任何想法？

I'm assuming that this might be possible only (if even) using some kind of trick — any ideas?

其他我尝试失败的事情是 padding-right：10px 和 border-right：10px solid rgba（255，255，255， 0）（透明边框）。

Other things I've tried unsuccessfully are padding-right: 10px and border-right: 10px solid rgba(255, 255, 255, 0) (a transparent border).

推荐答案

我认为这是不可能的，到右对齐的滚动条。滚动条是窗口UI的一部分，可能不是通过CSS样式。

I think thats not possible by assigning a right margin to a right-aligned scrollbar. The scrollbar is part of the window-UI and may not be styled via CSS.

但是，您可以创建一个内容包装器围绕HTML的所有其他元素，给it a max-width，小于100％，并为包装器设置 overflow：scroll; 。这将实现所需的效果和工作在几乎所有的浏览器。

However you can just create an content-wrapper around all other elements of your HTML, give it a max-width, which is smaller then 100% and set overflow: scroll; for the wrapper. This will achieve the desired effect and work in nearly all browsers.

[个人意见]我认为这是一个非常不好的习惯，某些网页设计师，谁想控制每一个我的屏幕。例如，滚动条应该由窗口管理器而不是我目前正在查看的网站设置样式。

[personal opinion] I think it's a very bad habit of certain web-designers, who want to control every piece of my screen. For example the scrollbars should be styled by the window-manager not by the website I'm currently viewing.

这篇关于CSS：可能“推” Webkit滚动条到内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！