資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何為 WebKit 瀏覽器設定捲軸滑塊樣式以及捲軸的組成部分是什麼？
捲軸是網頁瀏覽中必不可少的組成部分，允許使用者瀏覽長頁面的內容。基於 WebKit 的瀏覽器（例如 Safari 和 Google Chrome）提供了多種方法來設定捲軸滑塊（即可在捲軸軌道上上下移動的可拖動控制代碼）的樣式。
捲軸是任何顯示內容超出其邊界的視窗的重要功能。包含捲軸為使用者提供了一種瀏覽客戶端區域內容的方法。捲軸的方向決定了使用者與其互動時滾動的方向。
顧名思義，水平捲軸允許使用者水平滾動視窗的內容，允許他們將內容向左或向右移動。另一方面，垂直捲軸允許使用者垂直滾動內容，允許他們向上或向下瀏覽內容。
在本文中，我們將學習如何為 WebKit 瀏覽器設定捲軸滑塊樣式，並探討捲軸的不同組成部分。
捲軸的組成部分
捲軸由幾個部分組成，包括軌道、滑塊、箭頭和按鈕。捲軸由一個陰影軸組成，軸的兩端（即頂部和底部）各有一個箭頭按鈕，箭頭按鈕之間是一個滾動框（有時稱為滑塊）。
捲軸表示使用者視窗區域中資料物件的總長度或寬度，滾動框表示客戶端區域中可見的物件部分。
請注意，當用戶滾動資料物件以顯示其不同部分時，滾動框的位置會發生變化。另一方面，按鈕用於跳轉到上一頁或下一頁，或跳轉到內容的開頭或結尾。
設定捲軸滑塊樣式的方法
有多種方法可以在 CSS 中設定捲軸滑塊的樣式。讓我們討論一些常見的樣式方法。
方法 1：使用 WebKit 供應商字首
在這種方法中，我們使用 WebKit 供應商字首，請注意，這僅與基於 WebKit 的瀏覽器（如 Google Chrome、Edge 等）相容，需要將以下 CSS 程式碼新增到樣式表中。以下是語法。
語法
::-webkit-scrollbar-thumb {
background-color: green;
/* other CSS styles for scrollbar thumb */
}
示例
<html>
<head>
<title>Example to style the scrollbar thumb using Webkit Vendor Prefixes</title>
<style>
::-webkit-scrollbar-thumb {
background-color: green;
border-radius: 12px;
padding: 2px;
margin: none;
}
</style>
</head>
<body>
<h2>Example to style the scrollbar thumb using Webkit Vendor Prefixes</h2>
<p>
Tutorials Point was founded on the premise that there is a segment of readers who find online content more accessible and preferable when it comes to acquiring new skills at their own pace from the comfort of their homes. The journey began with the creation of a single tutorial on HTML in 2006. Encouraged by the positive response to the tutorial, we continued to expand our repository by adding new tutorials on a variety of subjects. Our current collection boasts a wealth of tutorials and articles on topics ranging from programming languages and web design to academics and much more.
</p>
</body>
</html>
方法 2：使用 WebKit 捲軸偽元素
在這種方法中，我們使用 WebKit 捲軸偽元素，請注意，這僅與基於 WebKit 的瀏覽器（如 Google Chrome、Edge 等）相容，需要將以下 CSS 程式碼新增到樣式表中。以下是語法。
語法
::-webkit-scrollbar {
width: 20px;
/* other CSS styles for scrollbar thumb */
}
::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 5px;
/* other CSS styles for scrollbar thumb */
}
示例
<html>
<head>
<title>Example to style the scrollbar thumb using Webkit Scrollbar Pseudo-elements</title>
<style>
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-thumb {
background-color: green;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>Example to style the scrollbar thumb using Webkit Scrollbar Pseudo-elements</h2>
<p>
Tutorials Point was founded on the premise that there is a segment of readers who find online content more accessible and preferable when it comes to acquiring new skills at their own pace from the comfort of their homes. The journey began with the creation of a single tutorial on HTML in 2006. Encouraged by the positive response to the tutorial, we continued to expand our repository by adding new tutorials on a variety of subjects. Our current collection boasts a wealth of tutorials and articles on topics ranging from programming languages and web design to academics and much more.
</p>
</body>
</html>
方法 3：使用 JavaScript 設定自定義捲軸樣式
在這種方法中，我們使用 JavaScript 設計和使用自定義捲軸。請注意，此方法與所有瀏覽器相容。請參見以下語法，瞭解如何在網頁中使用 JavaScript 程式碼。
語法
<style>
.scrollbar {
overflow: auto;
height: 250px;
width: 350px;
background-color: blue;
padding: 5px;
}
.thumb {
background-color: green;
height: 15px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
var scrollbar = document.querySelector('.scroll-thumb');
scroll-thumb.addEventListener('scroll', function() {
var mythumb = scrollbar.querySelector('.mythumb');
var mypercent = scrollbar.scrollTop / (scrollbar.scrollHeight - scrollbar.clientHeight);
var mythumbHeight = Math.floor(scrollbar.clientHeight * percent);
mythumb.style.height = mythumbHeight + 'px';
});
示例
<html>
<head>
<title>Example to style the scrollbar thumb using JavaScript</title>
<style>
.myscrollbar {
overflow: auto;
height: 200px;
width: 300px;
background-color: #eee;
padding: 10px;
}
.mythumb {
height: 20px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<h2>Example to style the scrollbar thumb using JavaScript</h1>
<div class="myscrollbar">
<div class="mythumb"></div>
<p>
Tutorials Point was founded on the premise that there is a segment of readers who find online content more accessible and preferable when it comes to acquiring new skills at their own pace from the comfort of their homes. The journey began with the creation of a single tutorial on HTML in 2006. Encouraged by the positive response to the tutorial, we continued to expand our repository by adding new tutorials on a variety of subjects. Our current collection boasts a wealth of tutorials and articles on topics ranging from programming languages and web design to academics and much more.
</p>
</div>
<script>
var myscrollbar = document.querySelector('.myscrollbar');
var mythumb = scrollbar.querySelector('.mythumb');
myscrollbar.addEventListener('scroll', function() {
var mythumbPosition = myscrollbar.scrollTop / (myscrollbar.scrollHeight - myscrollbar.clientHeight) * (myscrollbar.clientHeight - mythumb.clientHeight);
mythumb.style.top = mythumbPosition + 'px';
});
</script>
</body>
</html>
結論
在本文中，我們學習瞭如何為 WebKit 瀏覽器設定捲軸滑塊樣式，並瞭解了捲軸的不同組成部分。我們學習了為 WebKit 瀏覽器設定捲軸滑塊樣式的不同方法。第一種方法使用 WebKit 供應商字首直接設定捲軸滑塊樣式。第二種方法使用 WebKit 捲軸偽元素來設定滑塊和其他捲軸元件的樣式。第三種方法涉及使用 JavaScript 建立自定義捲軸並手動更新滑塊的位置。每種方法都有其優點和缺點，方法的選擇將取決於專案的具體要求。
更新於：2023年5月3日
676 次瀏覽
廣告