Rumah > Artikel > hujung hadapan web > 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:121399semak 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!

css webkit dom

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Sifat lebar CSSArtikel seterusnya：Sifat lebar CSS

Artikel berkaitan

Lihat lagi