Beberapa kaedah dan amalan untuk melaksanakan tiada bar skrol dalam CSS

Dalam pembangunan bahagian hadapan, bar skrol adalah elemen yang sangat biasa Dalam halaman web yang biasa kita lihat, bar skrol muncul pada hampir setiap halaman. Tetapi dalam beberapa kes, kami mungkin menghadapi beberapa halaman tanpa bar skrol, yang bukan pepijat tetapi pilihan reka bentuk. Dalam artikel ini, kami akan meneroka beberapa kaedah dan amalan untuk mencapai tiada bar skrol dalam CSS.

1. Sembunyikan bar skrol

Kaedah yang paling biasa ialah menyembunyikan bar skrol melalui CSS. CSS menyediakan banyak sifat untuk mengawal gaya bar skrol Kita boleh menggunakan beberapa sifat baharu CSS3 untuk mencapai kesan ini. Mengambil penyemak imbas webkit sebagai contoh, kita boleh melakukan ini:

body::-webkit-scrollbar { display: none; }

Ini boleh menyembunyikan keseluruhan bar skrol, tetapi ia mungkin tidak berfungsi dalam penyemak imbas lain. Jika anda perlu menggunakan kaedah ini dalam berbilang penyemak imbas, anda boleh menambah kod berikut:

html { overflow: -moz-scrollbars-none; }
html {-ms-overflow-style: none;}
html { overflow: -webkit-scrollbar; }
html::-webkit-scrollbar { display: none; }

2. Tindikan bar skrol

Kadangkala, kita perlu mengekalkan bar skrol, tetapi gunakan gaya untuk menyepadukannya dengan halaman untuk mencapai kesan yang lebih semula jadi. Ini memerlukan beberapa kemahiran.

Pertama, kita perlu mentakrifkan bekas dan mengehadkannya kepada saiz tetap:

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

Kemudian, kita akan menentukan dua elemen kanak-kanak di dalam bekas, satu untuk kandungan Bekas sebenar, yang lain sebagai bar skrol:

<div class="container">
  <div class="content"></div>
  <div class="scrollbar"></div>
</div>

Seterusnya kita perlu meletakkan bar skrol pada kedudukan yang betul. Dilaksanakan melalui kedudukan CSS.

.scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background-color: #d3d3d3;
  opacity: 0;
  transition: opacity 0.2s;
}

Seterusnya, anda perlu menambah pendengar acara roda tetikus pada bekas dan mengemas kini kedudukan bar skrol.

$('.container').bind('scroll', function() {
  updateScrollbar();
})

function updateScrollbar() {
  var scrollRatio = $('.container').scrollTop() / ($('.content').height() - $('.container').height());
  var topPosition = scrollRatio * ($('.container').height() - $('.scrollbar').height());
  $('.scrollbar').css('top', topPosition);
}

3. Tidak menggunakan bar skrol

Selain membuat bar skrol hilang atau disepadukan, kita juga boleh menggunakan kaedah lain, seperti menukar halaman atau menyelak Kesan.

Kesan perubahan halaman:

Letakkan kandungan tersembunyi pada panel tetap dan gunakan animasi CSS untuk meluncurkannya ke kawasan yang boleh dilihat apabila titik tatal dicapai.

.panel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.hiddenContent {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100%;
  overflow: auto;
  padding-right: 17px;
  box-sizing: content-box;
  transition: transform 0.5s ease-in-out;
}

.panel.active .hiddenContent {
  transform: translateY(-100%);
}

Kesan flip:

Dengan menambahkan bekas dan menggunakan sifat perspektif, kandungan diputar dalam ruang tiga dimensi.

.container {
  height: 100%;
  perspective: 1000px;
}

.content {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.content.inverted {
  transform: rotateX(180deg);
}

$('.container').on('scroll', function() {
  if ($('.container').scrollTop() >= $('.content').height() / 2) {
    $('.content').addClass('inverted');
  } else {
    $('.content').removeClass('inverted');
  }
})

Ringkasan:

Dalam artikel ini, kami meneroka cara untuk mencapai tiada bar skrol dalam CSS dan menggunakan beberapa amalan untuk menggunakan kaedah ini. Tidak kira kaedah yang anda gunakan, terdapat pertukaran antara kesederhanaan visual dan pengalaman pengguna, dan pilih kaedah yang paling sesuai untuk anda berdasarkan reka bentuk anda.

Atas ialah kandungan terperinci Beberapa kaedah dan amalan untuk melaksanakan tiada bar skrol dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!