数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在移动设备上使自定义滚动条箭头生效？
您可能已经注意到，一些网站具有独特的滚动条，赋予它们独特的感觉和外观，因为自定义滚动条正变得越来越普遍。自定义滚动条可以通过几种不同的方式实现。本文将使用最简单的方法，即 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="https://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>
当脚本执行时，它将生成一个输出，其中包含图像、一些文本和网页上的可滚动显示。
示例
考虑以下示例，我们使用 `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="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 的自定义可滚动区域，这些都显示在网页上。
更新于：2023年4月20日
2K+ 次浏览
广告