极客笔记CSS 如何使移动设备上的自定义滚动条箭头工作
您可能会注意到一些具有独特滚动条的网站，这使它们具有独特的感觉和外观，因为自定义滚动条越来越常见。自定义滚动条可以通过几种不同的方式来实现。本文将使用最简单的方法，即使用CSS。
我们使用CSS来增强应用程序中网页的视觉吸引力。使用CSS，我们现在可以改变滚动条的外观。让我们看看如何使移动设备上的自定义滚动条箭头工作。
使移动设备上的自定义滚动条箭头工作
早些时候，可以使用非标准CSS属性（如scrollbar-base-color）修改网站上的滚动条，您可以将其应用于滚动的元素（如\）并进行非常酷的操作。IE放弃了这一点。
自定义滚动条今天再次可用，但这次使用的是WebKit。属性现在使用“Shadow DOM”并且是供应商前缀的（例如：-webkit-scrollbar）。这已经存在一段时间了。
为了更好地了解如何使移动设备上的自定义滚动条箭头工作，让我们来看一些示例。
示例1
在以下示例中，我们使用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="https://www.tutorialspoint.com/about/images/about-mini-logo.jpg">
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>
当脚本被执行时，它将在网页上生成由图像、一些文本和可滚动显示组成的输出。
示例2
考虑以下示例，我们在网页上使用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>
在运行上述脚本时，输出窗口将弹出，显示文本以及在网页上显示的可滚动箭头。
示例3
执行下面的代码并观察我们如何使用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="https://upload.wikimedia.org/wikipedia/commons/3/3a/Ducatilogol.png">
<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的自定义可滚动条的输出，在网页上显示。