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?
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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/about/images/about-mini-logo.jpg" class="lazy" 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="/static/imghw/default1.png" data-src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Ducatilogol.png" class="lazy" 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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
1209
24
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
