Rumah > Artikel > hujung hadapan web > css untuk mengalih keluar bar skrol
Dalam reka bentuk web, bar skrol ialah salah satu elemen web biasa. Apabila mereka bentuk beberapa tapak web, bar skrol tersuai digunakan dalam halaman untuk keperluan estetik atau reka bentuk. Walau bagaimanapun, dalam sesetengah senario, kami mungkin perlu mengalih keluar bar skrol, seperti semasa memaparkan imej atau membaca kandungan pada peranti skrin kecil. Seterusnya, kami akan memperkenalkan cara menggunakan CSS untuk mengalih keluar bar skrol.
Sebelum memahami cara mengalih keluar bar skrol, anda mesti faham dahulu bahawa gaya bar skrol dalam halaman web biasanya dipaparkan oleh gaya lalai penyemak imbas. Oleh itu, kita perlu menetapkan gaya dalam helaian gaya CSS untuk mengawal bar skrol yang diberikan oleh penyemak imbas.
Kita boleh menggunakan atribut overflow
untuk menyembunyikan bar skrol. Mula-mula, tetapkan overflow
kepada hidden
untuk menyembunyikan bar skrol menegak, manakala bar skrol mendatar perlu ditetapkan kepada overflow-x: hidden;
.
body { overflow: hidden; /* 隐藏垂直滚动条 */ overflow-x: hidden; /* 隐藏水平滚动条 */ }
Selain itu, jika anda perlu menambah bar skrol gaya tersuai, anda boleh menggunakan ::-webkit-scrollbar
elemen pseudo. Elemen pseudo ini membolehkan anda mengawal gaya dan penampilan bar skrol. Kita boleh menggabungkan ::-webkit-scrollbar-thumb
elemen pseudo dan ::-webkit-scrollbar-track
elemen pseudo untuk melaksanakan gaya tersuai.
/* 自定义垂直滚动条 */ ::-webkit-scrollbar { width: 12px; /* 设置滚动条宽度 */ } ::-webkit-scrollbar-thumb { background-color: #ccc; /* 设置滚动条滑块颜色 */ } ::-webkit-scrollbar-track { background-color: #fff; /* 设置滚动轨道颜色 */ }
Dalam sesetengah kes, gaya tetapan dalam CSS tidak memberikan kawalan penuh ke atas bar skrol. Contohnya, dalam iOS, kerana pelayar Safari menggunakan bar skrolnya sendiri, adalah mustahil untuk mengawalnya dengan menetapkan gaya melalui CSS. Oleh itu, adalah mungkin untuk melaksanakan bar skrol tersuai menggunakan JavaScript.
Untuk pelaksanaan khusus, sila rujuk pustaka [SimpleBar](https://github.com/Grsmto/simplebar), yang boleh mencapai kesan yang serupa dengan bar skrol dalam Mac OS. Sebelum digunakan, anda perlu mengimport fail JavaScript dan CSS pustaka SimpleBar, dan kemudian menambah elemen dengan nama kelas simplebar-content
dalam HTML.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用 SimpleBar 实现自定义滚动条</title> <link rel="stylesheet" href="simplebar.css"> </head> <body> <div class="simplebar-content"> <!-- content goes here --> </div> <script src="simplebar.js"></script> <script> new SimpleBar(document.querySelector('.simplebar-content')); </script> </body> </html>
Di atas adalah tiga kaedah untuk mengalih keluar bar skrol. Antaranya, menggunakan JavaScript untuk melaksanakan bar skrol tersuai adalah kaedah yang paling fleksibel, yang boleh mencapai kesan bar skrol yang kita inginkan dalam pelbagai situasi.
Atas ialah kandungan terperinci css untuk mengalih keluar bar skrol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!