Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan untuk menyembunyikan bar skrol secara automatik-tutorial js-php.cn

Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan untuk menyembunyikan bar skrol secara automatik

WBOY

Lepaskan： 2023-10-27 16:36:36

asal

1254 orang telah melayarinya

Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan untuk menyembunyikan bar skrol secara automatik

Dalam pembangunan web, kami sering menggunakan bar skrol untuk membantu pengguna menyemak imbas kandungan halaman yang panjang. Walau bagaimanapun, bar skrol tradisional akan sentiasa dipaparkan pada halaman secara lalai, yang kadangkala menjejaskan pengalaman visual pengguna. Untuk meningkatkan estetika antara muka pengguna, kami boleh menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan menyembunyikan bar skrol secara automatik. Artikel ini menerangkan cara menggunakan ketiga-tiga teknologi ini untuk mencapai kefungsian ini dan menyediakan contoh kod khusus.

Pertama, kita perlu mencipta struktur halaman asas menggunakan HTML. Tambahkan elemen bekas dalam teg badan untuk mengandungi kandungan halaman. Seperti yang ditunjukkan di bawah:

<!DOCTYPE html>
<html>
<head>
  <title>自动隐藏滚动条</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <!-- 页面内容 -->
  </div>

  <script src="jquery.js"></script>
  <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Seterusnya, kita perlu menggunakan CSS untuk mentakrifkan gaya elemen bekas dan menyembunyikan bar skrol lalai. Tambahkan kod berikut pada fail style.css:

.container {
  width: 100%;
  height: 100vh;
  overflow: auto;
}

.container::-webkit-scrollbar {
  width: 8px;
  background-color: #f5f5f5;
}

.container::-webkit-scrollbar-thumb {
  background-color: #888;
}

.container::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

Salin selepas log masuk

Dalam kod di atas, kami menggunakan ::webkit-scrollbar pseudo-element untuk mentakrifkan gaya bar skrol. Antaranya, atribut width mentakrifkan lebar bar skrol, atribut warna latar belakang mentakrifkan warna latar belakang bar skrol, dan atribut warna latar belakang mentakrifkan warna latar depan bar skrol.

Kemudian, kami menggunakan jQuery untuk mengesan sama ada elemen bekas perlu memaparkan bar skrol dan merealisasikan kesan penyembunyian automatik bar skrol. Tambahkan kod berikut pada fail script.js:

$(document).ready(function() {
  $('.container').scroll(function() {
    if ($(this).scrollTop() > 0) {
      $('.container::-webkit-scrollbar').addClass('show');
    } else {
      $('.container::-webkit-scrollbar').removeClass('show');
    }
  });
});

Salin selepas log masuk

Dalam kod di atas, kami menggunakan acara skrol untuk mengesan kedudukan bar skrol. Jika nilai scrollTop() adalah lebih besar daripada 0, ini bermakna bar skrol telah ditatal, dan kami memaparkan bar skrol dengan menambah kelas pertunjukan jika tidak, kami menyembunyikan bar skrol dengan mengalih keluar kelas persembahan.

Akhir sekali, kita perlu mencipta pemalam jQuery untuk memulakan secara automatik fungsi bar skrol dalam halaman untuk kegunaan mudah di halaman lain. Tambahkan kod berikut pada fail script.js:

$.fn.autoHideScrollbar = function() {
  $(this).scroll(function() {
    if ($(this).scrollTop() > 0) {
      $(this).find('::-webkit-scrollbar').addClass('show');
    } else {
      $(this).find('::-webkit-scrollbar').removeClass('show');
    }
  });
};

$(document).ready(function() {
  $('.container').autoHideScrollbar();
});

Salin selepas log masuk

Dalam kod di atas, kami mencipta pemalam jQuery bernama autoHideScrollbar dan merangkumkan logik permulaan bar skrol di dalamnya. Kemudian, panggil pemalam dalam acara document.ready untuk memulakan fungsi bar skrol dalam halaman.

Melalui langkah di atas, kami telah berjaya melaksanakan fungsi lanjutan untuk menyembunyikan bar skrol secara automatik menggunakan HTML, CSS dan jQuery. Apabila pengguna menatal halaman, bar skrol akan dipaparkan atau disembunyikan secara automatik, yang meningkatkan estetika dan pengalaman pengguna halaman tersebut. Pembaca boleh mengubah suai gaya mengikut keperluan mereka sendiri dan menyepadukan kod ke dalam projek mereka sendiri. Semoga artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan untuk menyembunyikan bar skrol secara automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!