Ubah suai jquery lebar bar skrol

Dalam reka bentuk web, bar skrol ialah komponen yang sangat penting, yang membolehkan pengguna menyemak imbas halaman atau kawasan yang panjang dengan mudah, tetapi disebabkan perbezaan dalam penyemak imbas dan sistem pengendalian yang berbeza, penampilan bar skrol juga berbeza. Dalam kes ini, kita mungkin perlu mengubah suai gaya dan lebar bar skrol untuk memenuhi keperluan reka bentuk, dan ini boleh dicapai dengan mudah menggunakan jQuery.

1. Ubah suai gaya bar skrol

Pertama, kita perlu menentukan gaya untuk mengatasi gaya bar skrol lalai penyemak imbas Anda boleh merujuk kepada kod berikut:

/* 外部容器 */
.scroll-container {
  width: 300px;
  height: 200px;
  overflow: auto; /* 必须设置为auto或scroll才会产生滚动条 */
  background-color: #f2f2f2;
}

/* 滚动条整体 */
.scroll-bar {
  width: 8px;
  background-color: #aaa;
  border-radius: 4px;
}

/* 滚动条滑块 */
.scroll-thumb {
  width: 100%;
  background-color: #666;
  border-radius: 4px;
}

/* 滚动条箭头 */
.scroll-arrow {
  width: 8px;
  height: 8px;
  background-color: #aaa;
}

/* 鼠标悬停样式 */
.scroll-thumb:hover {
  background-color: #333;
}

/* 滚动条被选中时的样式 */
.scroll-thumb:active {
  background-color: #000;
}

/* 禁用滚动条样式 */
.scroll-container[disabled]::-webkit-scrollbar {
  width: 0;
  background-color: #f2f2f2;
}

Dalam kod di atas, kami mentakrifkan bekas luar .scroll-container dan menetapkan lebar, ketinggian dan gaya bar skrolnya. Gaya keseluruhan bar skrol .scroll-bar dan gaya peluncur .scroll-thumb masing-masing menetapkan lebar, warna latar belakang, sudut bulat dan gaya lain, manakala gaya anak panah .scroll-arrow hanya menetapkan lebar, tinggi dan warna latar belakang. Akhir sekali, kami mentakrifkan gaya untuk tuding dan pemilihan, serta gaya apabila bar skrol dilumpuhkan. Perlu diingat bahawa melumpuhkan gaya bar skrol memerlukan penggunaan elemen pseudo CSS ::-webkit-scrollbar.

2. Gunakan jQuery untuk mengubah suai lebar bar skrol

Dalam definisi gaya di atas, kami menetapkan lebar keseluruhan bar skrol kepada 8px. Jika anda perlu mengubah suai lebar bar skrol secara dinamik, anda boleh menggunakan kod jQuery berikut:

$('#container').css('scrollbar-width', '16px');

Dalam kod di atas, kami menggunakan kaedah .css() untuk mengubah suai lebar bar skrol bekas #container dan tetapkan lebar kepada 16px. Apa yang memerlukan peringatan khas di sini ialah scrollbar-width ialah atribut CSS baharu, pada masa ini hanya disokong oleh penyemak imbas Chrome. Untuk penyemak imbas lain, anda boleh menggunakan kod berikut untuk mencapainya:

if(navigator.userAgent.indexOf('Chrome') != -1) {
  $('#container').css('scrollbar-width', '16px');
} else {
  $('#container').css('width', $('#container').width() - 8 + 16);
  $('.scroll-thumb').css('width', 'calc(100% - 16px)');
}

Dalam kod di atas, kami mula-mula menggunakan kaedah navigator.userAgent untuk menentukan sama ada penyemak imbas semasa ialah Chrome, dan jika ya, ubah suai terus lebar bar skrol; jika tidak, Anda perlu menolak lebar bar skrol lalai 8px daripada lebar bekas width dan tambah lebar baharu 16px. Kemudian, kami mengubah suai lebar peluncur kepada .css() melalui kaedah calc(100% - 16px).

3. Ringkasan

Kandungan di atas memperkenalkan cara mengubah suai gaya dan lebar bar skrol melalui CSS dan jQuery. Perlu diingatkan bahawa atribut CSS scrollbar-width hanya terpakai pada penyemak imbas Chrome, manakala penyemak imbas lain perlu menggunakan kaedah lain untuk melaksanakannya. Dalam pembangunan sebenar, kita harus memilih penyelesaian yang sesuai mengikut situasi tertentu dan melaksanakan pemprosesan keserasian yang sesuai untuk memastikan bar skrol boleh dipaparkan dan digunakan secara normal di bawah penyemak imbas dan sistem pengendalian yang berbeza.

Atas ialah kandungan terperinci Ubah suai jquery lebar bar skrol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!