Geekly articles weekly

两个浏览器以某种方式进入滚动条...

图片 滚动条（scrollbar）是一种简单但有效的机制，是您查看大文件的主要手段。 但这还不是滚动条所能提供的全部功能！ 这些谦虚的主力也很擅长告诉用户与他们交互的文档的大小。 结果，滚动条承担了双重负担。 它们有助于处理各种材料，并告知用户这些材料的尺寸。

在实现千斤顶机制期间，可以更改滚动条的简单易懂的逻辑。 当滚动条的标准行为发生更改时，就会发生这种情况，这违反了用户期望的文档长度和滚动条高度之间的对应关系。

此外，具有触摸屏的设备的程序已经普及了隐藏滚动条的想法。 使用这种方法，滚动条是不可见的，直到用户开始滚动不适合某个查看区域的元素。 结果，事实证明，为了使应用程序具有视觉吸引力，设计人员牺牲了界面的清晰度。 用户可能需要一些时间来了解某个容器中的内容可以滚动。 这样的容器看起来好像它不支持滚动，或者好像它根本不需要滚动。

经典台式机操作系统已经接受了这种移动趋势，试图最大程度地减少传统滚动条在应用程序设计中的干扰。

该材料（我们今天发布的翻译）专门介绍了在Web应用程序中使用滚动条的某些功能。

一些术语


在继续之前-让我们定义几个我们将在这里使用的术语。 即，我们区分两种类型的滚动条：

  • 固定的（突出的）滚动条-占据屏幕空间的滚动条。 它们不会与您正在查看的内容重叠，而是位于它们旁边。
  • 非固定（不干扰）滚动条-与内容重叠的滚动条。 它们不会从它们所属的容器中占用屏幕空间。

现代滚动条的标准行为


默认情况下，iOS和Android滚动条均未修复。

在macOS中（特别是在撰写本文时，我们正在谈论相关的macOS Mojave），滚动条一直隐藏到元素开始滚动为止。 这是在鼠标未连接到计算机的情况下系统的标准行为。 有三个显示滚动条的选项（可以在“ General > System Preferences设置”中找到相应的设置）。


macOS Mojave中的滚动条设置

结果发现，这些设置控制着Chrome，Firefox和基于Chromium的新Edge中滚动条的行为。

这是一个视频，您可以观看该视频以了解上述设置如何影响滚动条，以及滚动条（除了允许您滚动内容之外）如何影响它。 以下是该视频的一些摘录。


macOS中的固定滚动条始终可见，并占用一些屏幕空间


MacOS非固定滚动条在滚动文档时覆盖内容


未滚动文档时，macOS中未固定的滚动条将被隐藏

在Windows 10中，通过Settings > Display > Simplify and personalize Windows ，可以找到类似的设置。


Windows 10中的滚动条设置

不幸的是，即使Automatically hide scroll bars in Windows ，它也不会影响Firefox，Chrome，Internet Explorer和Edge。 就Edge而言，我们既在讨论基于Chromium的浏览器变体，又在讨论基于EdgeHTML的变体。

任务概述


这是我们上面在macOS上查看的页面在Windows上的外观。


Windows滚动条页面

Windows滚动条默认情况下是固定的。 此外，它们在设计上看起来“很沉重”。 在标准版本中，它们比macOS中的同类产品宽得多。 此外，Windows中滚动条的颜色通常与系统设置匹配，而不与网页的调色板匹配。

习惯了macOS环境，但正在开发针对不同平台设计的Web应用程序的设计人员，可能会发现很难使他们的项目在不同的OS中看起来不错，并且不花太多的系统资源进行渲染。

项目要求


我们要开发一个Web应用程序，其中使用的滚动条在以下功能方面有所不同：

  • 在桌面操作系统上查看页面时，它们应该看起来很吸引人。 当显示内容不完全适合它们的容器时，这尤其重要。 滚动条显示在此类容器内，这意味着这些滚动条的设计必须与容器的设计完全一致。 我们认为，对于允许您滚动整个页面的滚动条来说，这并不是那么重要，但这无疑是一个有争议的问题。
  • 我们要最小化滚动条可能占用的屏幕空间。 在Windows中，默认情况下，滚动条是固定的并且非常宽。
  • 我们要关注系统设置。 如果用户在定义滚动条行为的设置中选择了非标准选项，则我们需要尽可能地考虑这一点。
  • 我们努力避免使用繁重的JavaScript解决方案（例如非常漂亮的OverlayScrollbars插件），该解决方案旨在与未固定的滚动条一起使用。 它们在客户端计算机上造成相当大的负担。

我可以使用CSS多远？


这是分配了overflowing-element类的容器元素的代码，以及用于设置其样式的CSS代码：

 <div class="overflowing-element"></div> .overflowing-element {  overflow-y: auto;  -webkit-overflow-scrolling: touch;  -ms-overflow-style: -ms-autohiding-scrollbar; }

如果在Internet Explorer和基于EdgeHTML的Edge中需要未固定的滚动条，则意味着-ms-overflow-style: -ms-autohiding-scrollbar; 。 使用它，一切都会按其应有的方式工作（这很简单-对吗？）。

当iOS 13发布时，事实证明-webkit-overflow-scrolling：touch属性可能不需要改善滚动的物理效果。 虽然，如果您需要支持旧版本的iOS，最好不要拒绝使用此属性。

如果我们谈论与滚动相关的CSS属性，那么阅读有关overscroll-behavior属性可能很有用。 当到达支持滚动的元素的边界时，它允许您控制系统的行为。

▍Firefox


Firefox浏览器支持不带前缀的CSS属性。 这是scrollbar-color和scrollbar-width 。

为了清楚起见，以下示例使用了Internet Explorer 11中不支持的CSS变量：

 :root {  --scrollbar-track-color: transparent;  --scrollbar-color: rgba(0,0,0,.2);  --scrollbar-width: thin; /* or `auto` or `none` */ } .overflowing-element {  scrollbar-width: var(--scrollbar-width);  scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color); }

▍Chrome和Safari，基于Chromium的Edge浏览器以及其他浏览器


基于Webkit和Blink的浏览器支持设计用于自定义滚动条的自定义伪元素 ：

 :root {  --scrollbar-track-color: transparent;  --scrollbar-color: rgba(0,0,0,.2);  --scrollbar-size: .375rem;  --scrollbar-minlength: 1.5rem; /*     ( ,  ) */ } .overflowing-element::-webkit-scrollbar {  height: var(--scrollbar-size);  width: var(--scrollbar-size); } .overflowing-element::-webkit-scrollbar-track {  background-color: var(--scrollbar-track-color); } .overflowing-element::-webkit-scrollbar-thumb {  background-color: var(--scrollbar-color);  /*   -  :hover :active */ } .overflowing-element::-webkit-scrollbar-thumb:vertical {  min-height: var(--scrollbar-minlength); } .overflowing-element::-webkit-scrollbar-thumb:horizontal {  min-width: var(--scrollbar-minlength); }

这是 CodePen 上的一个示例，展示了自定义滚动条的功能，该功能由CSS专门执行。 这是一个示例，演示了滚动条的标准行为。 您可以比较它们。

应该注意的是，以上代码有一个问题。 它包含以下事实：在macOS中设置伪元素::-webkit-scrollbar的height或width属性时，未固定的::-webkit-scrollbar将替换为固定的::-webkit-scrollbar （重新定义了标准设置）。 但是，用一小段JavaScript代码解决这个问题并不困难。

CSS和一些JS


我们可以向项目中添加少量JavaScript代码，这使我们能够确定标准滚动条是否固定。 看起来像这样：

 /* *   . *   body   `layout-scrollbar-obtrusive` *   ,     . */ var parent = document.createElement("div"); parent.setAttribute("style", "width:30px;height:30px;"); parent.classList.add('scrollbar-test'); var child = document.createElement("div"); child.setAttribute("style", "width:100%;height:40px"); parent.appendChild(child); document.body.appendChild(parent); //   .    //   30px,    . var scrollbarWidth = 30 - parent.firstChild.clientWidth; if(scrollbarWidth) {  document.body.classList.add("layout-scrollbar-obtrusive"); } document.body.removeChild(parent);

如果滚动条是固定的，则将layout-scrollbar-obtrusive类添加到body文档元素。 此类可用于仅调整固定滚动条的width和height属性。 这样避免了滚动条行为的上述干扰。 在此干预期间，滚动条会更改，并且项目会脱离用户进行的系统设置。 这是layout-scrollbar-obtrusive的样式：

 .layout-scrollbar-obtrusive .layout-scrollbar::-webkit-scrollbar {  height: var(--scrollbar-size);  width: var(--scrollbar-size); }

在这里，您可以找到一个将CSS和JavaScript一起使用的技术示例。 为了进行比较， 这里是一个示例，演示了系统的标准行为。

摘要：对该问题的解决方案的回顾


在带有使用不固定滚动条的触摸屏的设备上（即，在iOS和Android设备上），我们仅使用滚动条的标准行为。

在macOS中，我们有机会考虑用户所做的系统设置。 这意味着我们不会无意间在非固定和固定滚动条之间切换。 我们仅将样式应用于始终可见的固定滚动条。 这使我们能够使页面的外观符合我们的项目设计要求。

在Windows（即Firefox和Chrome浏览器）中，没有标准的未固定滚动条，但是在这里，与其他情况一样，我们可以采用仅使用CSS功能的方法。 由于我们能够提出使用可通过CSS定制的滚动条的工作示例，因此我们能够与我们的设计团队达成协议。 我们做出了妥协，避免使用繁琐的JavaScript解决方案。

这里是演示项目，其实质已在上面进行了描述：

  • 显示标准滚动条行为。
  • 仅使用CSS的解决方案 。 所有滚动条均具有样式。
  • 使用CSS和JavaScript的解决方案 。 仅对固定的滚动条设置样式。

亲爱的读者们！ 您如何在项目中设置滚动条的样式？


Source: https://habr.com/ru/post/zh-CN468405/

More articles:


All Articles