css untuk mengalih keluar bar skrol-Soal Jawab bahagian hadapan-php.cn

css untuk mengalih keluar bar skrol

PHPz

Lepaskan： 2023-05-27 09:10:07

asal

964 orang telah melayarinya

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.

Sembunyikan bar skrol

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; /* 隐藏水平滚动条 */
}

Salin selepas log masuk

Gaya bar skrol tersuai

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; /* 设置滚动轨道颜色 */
}

Salin selepas log masuk

Menggunakan JavaScript untuk melaksanakan

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>

Salin selepas log masuk

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!