如何使捲軸自訂箭頭在行動裝置上運作？-css教學-PHP中文網

使捲軸自訂箭頭在行動裝置上工作

範例

首頁

web前端

css教學

如何使捲軸自訂箭頭在行動裝置上運作？

王林

Sep 17, 2023 pm 07:25 PM

如何使捲軸自訂箭頭在行動裝置上運作？

您可能已經注意到具有獨特滾動條的網站，這些網站賦予它們獨特的感覺和外觀，因為自訂滾動條變得越來越普遍。自訂捲軸可以透過幾種不同的方式簡單地實現。本文將使用最簡單的方法，即 CSS。

我們使用 CSS 來增強應用程式中網頁的視覺吸引力。使用 CSS，我們現在可以更改滾動條的外觀。讓我們看看如何讓滾動條自訂箭頭在行動裝置上運作。

使捲軸自訂箭頭在行動裝置上工作

過去，網站上的捲軸可以使用非標準 CSS 屬性（如scrollbar-base-color）進行修改，您可以將其應用於滾動的元素（如）並做一些非常棒的事情。 IE 放棄了這一點。

自訂捲軸今天再次可用，儘管這次使用了 WebKit。這些屬性現在使用“Shadow DOM”並且帶有供應商前綴（例如：-webkit-scrollbar）。這已經存在了一段時間了。

為了獲得有關使滾動條自訂箭頭在行動裝置上工作的更多想法，讓我們看看以下範例。

範例

在下面的範例中，我們使用 webkit-scrollbar 使捲軸在行動裝置上運作並將 CSS 套用到捲軸。

<!DOCTYPE html>
<html>
   <body>
      <style>
         div{
            max-width:400px;
            max-height:250px;
            overflow-y: scroll;
            overflow-x: hidden;
         }
         div::-webkit-scrollbar {
            width: 0.5em;
         }
         div::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 2px rgba(1,1,1,0.4);
         }
         div::-webkit-scrollbar-thumb {
            background-color: #D5F5E3;
            outline: 1px solid #FBFCFC;
         }
      </style>
      <div id="tutorial">
         <img  src="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/about/images/about-mini-logo.jpg"  class="lazy" alt="如何使捲軸自訂箭頭在行動裝置上運作？" >
         Tutorials Point originated from the idea that there exists a class of readers
         who respond better to online content and prefer to learn new skills at their
         own pace from the comforts of their drawing rooms.The journey commenced with
         a single tutorial on HTML in 2006 and elated by the response it generated, we
         worked our way to adding fresh tutorials to our repository which now proudly
         flaunts a wealth of tutorials and allied articles on topics ranging from programming
         languages to web designing to academics and much more.
      </div>
   </body>
</html>

登入後複製

當腳本執行時，它將產生一個由圖像、一些文字和網頁上可捲動顯示組成的輸出。

範例

考慮以下範例，我們使用 webkit-scrollable 使內容在網頁上隨著箭頭滾動。

<!DOCTYPE html>
<html>
   <body>
      <style>
         .visible-scrollbar,
         .mostly-customized-scrollbar {
            display: block;
            width: 300px;
            overflow: auto;
            height: 150px;
         }
         .invisible-scrollbar::-webkit-scrollbar {
            display: none;
         }
         .mostly-customized-scrollbar::-webkit-scrollbar {
            width: 300px;
            height: 8px;
            background-color:#7D3C98 ;
         }
         .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
            outline: 1px solid #FBFCFC;
         }
      </style>
      <div class="visible-scrollbar">
         Mahendra Singh Dhoni born 7 July 1981, commonly known as MS Dhoni,
         is a former Indian cricketer and captain of the Indian national team
         in limited-overs formats from 2007 to 2017, and in Test cricket from
         2008 to 2014. He is also the current captain of Chennai Super Kings in
         the Indian Premier League. Under his captaincy, India won the 2007 ICC
         World Twenty20, the 2011 Cricket World Cup, and the 2013 ICC Champions
         Trophy, the most by any captain. He also led India to victory in the 2010
         and 2016 Asia Cup.
      </div>
   </body>
</html>

登入後複製

執行上述腳本時，將彈出輸出窗口，顯示文字以及網頁上顯示的可捲動箭頭。

範例

執行下面的程式碼並觀察我們如何使用 webkit-scrollable 製作自訂捲動。

<!DOCTYPE html>
<html>
   <body>
      <style>
         body {
            font-size: 15pt;
         }
         ::-webkit-scrollbar {
            width: 14px;
            border: 1px solid blue;
         }
         ::-webkit-scrollbar-button:single-button {
            background-color: fuchsia;
            height: 10px;
            width: 10px;
         }
         ::-webkit-scrollbar-thumb {
            background: maroon;
         }
         ::-webkit-scrollbar-track {
            background: silver;
         }
         ::-webkit-resizer {
            background: olive;
         }
      </style>
      <center>
         <img  src="/static/imghw/default1.png"  data-src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Ducatilogol.png"  class="lazy" alt="如何使捲軸自訂箭頭在行動裝置上運作？" >
         <p>Ducati is a group of companies, best known for manufacturing motorcycles
         and headquartered in Borgo Panigale, Bologna, Italy. The group is owned by
         German automotive manufacturer Audi through its Italian subsidiary
         Lamborghini, which is in turn owned by the Volkswagen Group.</p>
         <br>
         <p>In the 1930s and 1940s, Ducati manufactured radios, cameras, and
         electrical products such as razors. Ducati also made a marine binocular called the BIMAR for the Kriegsmarine during World War II, some of which
         were sold on the civilian market after the war.The Ducati Sogno was
         a half-frame Leica-like camera which is now a collector's item.</p>
      </center>
   </body>
</html>

登入後複製

執行腳本時，它將產生一個由文字、圖像和應用 CSS 的自訂捲軸組成的輸出，並顯示在網頁上。

以上是如何使捲軸自訂箭頭在行動裝置上運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn