讓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風格滾動特性

教程一（帶圖片說明的樣式）

教程二

滾動條的組成部分

簡單而優雅的滾動條

簡單而優雅的滾動條

您的項目需求