Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menjadikan anak panah tersuai bar skrol berfungsi pada peranti mudah alih?
Bagaimana untuk menjadikan anak panah tersuai bar skrol berfungsi pada peranti mudah alih?
- 王林ke hadapan
- 2023-09-17 19:25:121415semak imbas
Anda mungkin perasan tapak web dengan bar skrol unik yang memberi mereka rasa dan rupa yang unik, kerana bar skrol tersuai menjadi semakin biasa. Bar skrol tersuai boleh dilaksanakan dengan mudah dalam beberapa cara yang berbeza. Artikel ini akan menggunakan kaedah paling mudah, CSS.
Kami menggunakan CSS untuk meningkatkan daya tarikan visual halaman web dalam aplikasi. Menggunakan CSS, kita kini boleh menukar rupa bar skrol. Mari lihat cara membuat anak panah tersuai bar skrol berfungsi pada peranti mudah alih.
Jadikan anak panah tersuai bar skrol berfungsi pada peranti mudah alih
Pada masa lalu, bar skrol pada tapak web boleh diubah suai menggunakan sifat CSS bukan standard (seperti bar skrol-base-color), yang boleh anda gunakan pada elemen menatal (seperti ) dan melakukan beberapa perkara yang cukup menarik. IE meninggalkan ini.
Bar skrol tersuai tersedia lagi hari ini, walaupun kali ini menggunakan WebKit. Sifat ini kini menggunakan "Shadow DOM" dan mempunyai awalan vendor (cth: -webkit-scrollbar). Ini telah wujud untuk beberapa ketika.
Untuk mendapatkan lebih banyak idea tentang membuat anak panah tersuai bar skrol berfungsi pada peranti mudah alih, mari lihat contoh berikut.
Contoh
Dalam contoh di bawah, kami menggunakan webkit-scrollbar untuk menjadikan bar skrol berfungsi pada peranti mudah alih dan menggunakan CSS pada bar skrol.
<!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" alt="Bagaimana untuk menjadikan anak panah tersuai bar skrol berfungsi pada peranti mudah alih?" >
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>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada imej, beberapa teks dan paparan boleh ditatal pada halaman web.
Contoh
Pertimbangkan contoh berikut di mana kami menggunakan webkit-scrollable untuk membuat tatal kandungan dengan anak panah pada halaman web.
<!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>
Apabila anda menjalankan skrip di atas, tetingkap output akan muncul menunjukkan teks bersama-sama dengan anak panah boleh tatal yang ditunjukkan pada halaman web.
Contoh
Laksanakan kod di bawah dan perhatikan cara kami membuat tatal tersuai menggunakan webkit-boleh tatal.
<!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" alt="Bagaimana untuk menjadikan anak panah tersuai bar skrol berfungsi pada peranti mudah alih?" >
<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>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada teks, imej dan bar skrol tersuai dengan CSS digunakan, dan dipaparkan pada halaman web.
Atas ialah kandungan terperinci Bagaimana untuk menjadikan anak panah tersuai bar skrol berfungsi pada peranti mudah alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!