hujung hadapan webtutorial cssBagaimana 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/imghwm/default1.png" data-src="https://www.tutorialspoint.com/about/images/about-mini-logo.jpg?x-oss-process=image/resize,p_40" 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/imghwm/default1.png" data-src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Ducatilogol.png?x-oss-process=image/resize,p_40" 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!
Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?Apr 18, 2025 am 11:34 AMSaya mendapat soalan ini pada hari yang lain. Pemikiran pertama saya ialah: soalan pelik! Kekhususan adalah mengenai pemilih, dan at-peraturan bukan pemilih, jadi ... tidak relevan?
Bolehkah anda bersarang @media dan @support pertanyaan?Apr 18, 2025 am 11:32 AMYa, anda boleh, dan ia tidak begitu penting dalam perintah apa. Preprocessor CSS tidak diperlukan. Ia berfungsi dalam CSS biasa.
Cache Cache PantasApr 18, 2025 am 11:23 AMAnda pasti pasti menetapkan tajuk cache yang jauh pada aset anda seperti CSS dan JavaScript (dan imej dan fon dan apa sahaja yang lain). Yang memberitahu penyemak imbas
Dalam mencari timbunan yang memantau kualiti dan kerumitan CSSApr 18, 2025 am 11:22 AMRamai pemaju menulis tentang bagaimana untuk mengekalkan asas CSS, namun tidak banyak daripada mereka menulis tentang bagaimana mereka mengukur kualiti asas kod tersebut. Pasti, kita ada
Datalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilaiApr 18, 2025 am 11:08 AMPernahkah anda mempunyai bentuk yang perlu menerima sedikit teks yang sewenang -wenangnya? Seperti nama atau apa sahaja. Itu ' s betul -betul apa. Terdapat banyak
Persidangan Depan di ZürichApr 18, 2025 am 11:03 AMSaya sangat teruja untuk menuju ke Zürich, Switzerland untuk persidangan depan (suka nama dan url!). Saya tidak pernah ke Switzerland sebelum ini, jadi saya teruja
Membina aplikasi tanpa pelayan penuh dengan pekerja CloudflareApr 18, 2025 am 10:58 AMSalah satu perkembangan kegemaran saya dalam pembangunan perisian adalah kedatangan tanpa pelayan. Sebagai pemaju yang mempunyai kecenderungan untuk terjebak dalam butiran
Membuat Laluan Dinamik dalam Aplikasi NUXTApr 18, 2025 am 10:53 AMDalam siaran ini, kami akan menggunakan demo kedai e -dagang yang saya bina dan digunakan untuk Netlify untuk menunjukkan bagaimana kami boleh membuat laluan dinamik untuk data masuk. Ia adil
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
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
