html溢出显示滚动条_在OS X上显示溢出滚动条

最新推荐文章于 2024-06-12 07:30:00 发布

culuo8053

最新推荐文章于 2024-06-12 07:30:00 发布

阅读量521

点赞数

文章标签： java css js python html ViewUI

原文链接：https://davidwalsh.name/osx-overflow

版权

html溢出显示滚动条

The update to OS X Lion implemented the scrolling idea of iOS mobiles, which is hiding a window (and other elements with scrolling) until the target area is tapped or swiped. While that may seem like a minor change, in as far as basic usability, it's actually a big one, as you can't easily identify areas which may be holding more content. This is a problem I recently faced and after some research, I found the solution to said problem, at least in WebKit.

OS X Lion的更新实现了iOS手机的滚动思想，即隐藏窗口(以及其他具有滚动元素的元素)，直到轻击或轻扫目标区域。尽管这似乎是一个很小的变化，但就基本的可用性而言，它实际上是一个很大的变化，因为您无法轻松地确定可能包含更多内容的区域。这是我最近遇到的一个问题，经过研究后，至少在WebKit中，我找到了解决该问题的方法。

CSS (The CSS)

WebKit provides a whole host of stylable CSS selectors, some of which are almost native. We'll use two of those to show scrollbars within the document:

WebKit提供了大量可样式化CSS选择器，其中一些几乎是本机的。我们将使用其中两个来显示文档中的滚动条：


::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

What's cool is that you can use any color to style scrollbars, but it may be best to stick to native colors.

不错的是，您可以使用任何颜色来设置滚动条的样式，但最好还是保留本机颜色。

This technique isn't something you'd use often but it has its place. You can't fault users for wanting to see overflow, so if you encounter that situation, use the code provided above!

这项技术不是您经常使用的技术，但是它有它的位置。不能因为希望看到溢出而对用户造成错误，因此，如果遇到这种情况，请使用上面提供的代码！