让Chrome“滚”得更流畅：微软推荐Edge HTML风格滚动特性

T之家12月9日消息微软对Chromium开源项目非常感兴趣，因为该项目对Edge和Chrome都有利。微软最新的功能请求之一就是希望通过部署Edge HTML风格的滚动特性从而让Chromium的滚动变得更加灵敏。

微软打算将Impulse样式（即EdgeHTML样式）滚动动画加入到Chromium中，微软已经将该滚动动画移植到了基于Chromium的Edge浏览器的Dev Canary通道中。默认情况下，Edge浏览器中启用了脉冲样式的滚动动画。对于Chrome，该功能可能会在未来几天内出现在试验版浏览器中。

微软表示，Impulse-style (也就是EdgeHTML-style)滚动动画将提供更灵敏的滚动体验，用户启用后鼠标滚轮的每个刻度都试图模仿基于物理的内容，内容会开始快速移动然后逐渐变慢。换句话说，由于开始时的快速加速，该模式会给人一种更灵敏的感觉。

此外微软还在推行另一项称之为“percent-based scrolling”（基于百分比的滚动）的滚动方案，该模式允许浏览器将鼠标滚轮或者键盘滚动解释为预期滚动条的百分比。微软目前正努力将经典版Edge浏览器的优秀特性移植到Chromium平台上，包括这项基于百分比的滚动方式。

友们，下午好！

都说一张美美的图能为文章增色三分！

那如果是一个交互的图片样式 + 几张美美图呢？这能为文章增色多少呢？

比如这种（样式ID：90298）

使用这种样式，即能有效的展示图片，还能缩小文章空间，而且还与读者存在互动交互，想不想知道这种样式怎么做出来呢？

上面两种样式都可以在样式中心输入ID搜索到。

但是，样式中心的原样式，都是四张图片滑动的，直接进行换图就可以使用了。

但如果要像三儿上面做的两个样式，一个是5张图，一个是9张图，就要进HTML进行修改了。

教程一（带图片说明的样式）

进入到“HTML”模式，找到<section .........> </section>这段代码，先选择Ctrl+C复制。

然后在此段代码结尾处敲回车键换行，再选择Ctrl+V粘贴。

粘贴几次，样式就会在原有四张的基础上多出几张，胖友们可以根据自己的需求进行多次粘贴。

教程二

进入到“HTML”模式，找到<img src=........./>这段代码，先选择Ctrl+C复制，然后在此段代码结尾处，再Ctrl+V粘贴。

同上个样式，粘贴几次，样式就会在原有四张的基础上多出几张，胖友们可以根据自己的需求进行多次粘贴。

为了样式的美感，还是有三点建议给大家。

1、图片请保持尺寸一致。否则会导致图片层次不齐。

2、尺寸请500x500以上。否则可能会使图片不清楚。

3、图片大小尽可能小点。否则浏览时加载会不流畅。

更多好玩样式，请进样式中心搜索“滚动”

好了，本次教程就到这里~bye

本文中，我们将深入了解滚动条的世界。我知道，这听起来不太迷人，但相信我，精心设计的页面与匹配的滚动条齐头并进。老式的镀铬滚动条只是不适合那么多。

我们将研究滚动条的细节，然后看看一些很酷的例子。

滚动条的组成部分

要设置滚动条的样式，您需要熟悉滚动条的解剖结构。请看这张图：

这里要记住的两个主要组成部分是：

scrollbar track是滚动条下方的背景。
scrollbar humb是用户单击和拖动的部分。

我们可以使用供应商前缀：：-webkit-scrollbar 选择器更改完整滚动条的属性。我们可以给滚动条一个固定的宽度、背景颜色、圆角......很多事情！如果我们自定义页面的主滚动条，那么我们可以直接在 HTML 元素上使用：：-webkit-scrollbar：

html::-webkit-scrollbar {
  /* Style away! */
}

如果我们自定义一个滚动框，这是溢出的结果：滚动，那么我们可以在该元素上使用：：-webkit-scrollbar：

.element::-webkit-scrollbar {
  /* Style away! */
}

下面是一个快速示例，它设置 HTML 元素滚动条的样式，使其宽，背景为红色：

如果我们只想更改滚动条的thumb或track怎么办？你猜对了——我们分别为这两个元素提供了特殊的前缀伪元素：：：-webkit-scrollbar-thumb 和：：-webkit-scrollbar-track。以下是我们将所有这些东西放在一起时可能实现的想法：

向您展示三个度的自定义滚动条样式，然后打开一个从网络上提取示例的大型展示，以获取灵感。

简单而优雅的滚动条

自定义滚动条仍然可以是最小的。我整理了一组示例，这些示例巧妙地改变了外观，无论是对拇指或轨道进行轻微的颜色更改，还是对背景进行一些浅色造型。

如您所见，在滚动条样式方面，我们不必发疯。有时，只需进行细微的更改即可通过与整体主题匹配的滚动条来增强整体用户体验.

html::-webkit-scrollbar{
  width: 50px;
  background:red;
}

如果我们只想更改滚动条的拇指或轨道怎么办？你猜对了——我们分别为这两个元素提供了特殊的前缀伪元素：：：-webkit-scrollbar-thumb 和：：-webkit-scrollbar-track。以下是我们将所有这些东西放在一起时可能实现的想法：

html::-webkit-scrollbar {
  width: 30px;
}
 
html::-webkit-scrollbar-track {
  background: black;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
html::-webkit-scrollbar-thumb {
  background: red;
  border: 3px solid blue;
}

向您展示三个度的自定义滚动条样式，然后打开一个从网络上提取示例的大型展示，以获取灵感。

简单而优雅的滚动条

.container {
            display: flex;
            margin: 50px;
            column-gap: 20px;
        }
        
        .scrollbar {
            height: 300px;
            width: 50%;
            overflow: auto;
            padding: 0 10px;
        }
        /*       ScrollBar 1        */
        
        #scrollbar1::-webkit-scrollbar {
            width: 10px;
        }
        
        #scrollbar1::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
        }
        
        #scrollbar1::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #d55959;
        }
        /*       ScrollBar 2        */
        
        #scrollbar2::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar2::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        }
        
        #scrollbar2::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #363636;
        }
        /*        ScrollBar 3    */
        
        #scrollbar3::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar3::-webkit-scrollbar-track {
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
        }
        
        #scrollbar3::-webkit-scrollbar-thumb {
            background-color: #060b9a;
        }
        /*        ScrollBar 4    */
        
        #scrollbar4::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar4::-webkit-scrollbar-track {
            background-color: transparent;
            border: 1.5px solid #7e7e7e;
            border-radius: 8px;
        }
        
        #scrollbar4::-webkit-scrollbar-thumb {
            background-color: #f1f1f1;
            border: 2px solid #616161;
            border-radius: 8px;
        }
        /*        ScrollBar 5    */
        
        #scrollbar5::-webkit-scrollbar {
            background-color: #000;
            width: 12px;
            border-radius: 10px;
        }
        
        #scrollbar5::-webkit-scrollbar-track {
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
        }
        
        #scrollbar5::-webkit-scrollbar-thumb {
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));
            border-radius: 10px;
        }
        /*       ScrollBar 6        */
        
        #scrollbar6::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar6::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #95a5a6;
            border: 1px solid #cacaca;
        }
        
        #scrollbar6::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #2c3e50;
        }

如您所见，在滚动条样式方面，我们不必发疯。有时，只需进行细微的更改即可通过与整体主题匹配的滚动条来增强整体用户体验。

在线咨询

上一篇：使用 MQTT 在项目中实现数据收发
下一篇：（亲测可用）html5调用手机摄像头

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

让Chrome“滚”得更流畅：微软推荐Edge HTML风格滚动特性

教程一（带图片说明的样式）

教程二

滚动条的组成部分

简单而优雅的滚动条

简单而优雅的滚动条

您的项目需求