CSS menetapkan gaya bar skrol

CSS (Cascading Style Sheets) ialah salah satu teknologi yang paling kerap digunakan dalam pembangunan bahagian hadapan, yang boleh mencapai kesan visual halaman yang kaya. Antaranya, gaya bar skrol tersuai juga merupakan keperluan biasa. Artikel ini akan memperkenalkan cara menggunakan CSS untuk menggayakan bar skrol.

1. Gaya bar skrol asas

CSS menyediakan beberapa tetapan gaya bar skrol asas Kami boleh menambah atribut berikut pada bar skrol dalam helaian gaya:

/* 垂直滚动条样式 */
/* 宽度 */
::-webkit-scrollbar {
    width: 12px;
}
/* 背景色 */
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

/* 水平滚动条样式 */
/* 高度 */
::-webkit-scrollbar {
    height: 12px;
}
/* 背景色 */
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

<.>
• : Tetapkan lebar (atau ketinggian) bar skrol. Untuk bar skrol menegak, atribut lebar berfungsi untuk bar skrol mendatar, atribut ketinggian berfungsi. ::-webkit-scrollbar
• : Tetapkan warna latar belakang bar skrol. ::-webkit-scrollbar-track
• : Tetapkan warna peluncur bar skrol. ::-webkit-scrollbar-thumb

Menggunakan kod di atas, kita boleh menambah gaya kelabu ringkas pada bar skrol. Walau bagaimanapun, gaya ini mungkin tidak cukup menonjol untuk disepadukan dengan baik ke dalam gaya halaman Beberapa tetapan gaya bar skrol yang diperibadikan akan diperkenalkan di bawah.

2. Sesuaikan peluncur dan warna latar belakang

Untuk menyesuaikan peluncur dan warna latar belakang bar skrol, anda boleh menggunakan atribut

untuk menyesuaikan kedua-dua bahagian ini. Sebagai contoh, kita boleh menggunakan kesan kecerunan untuk menjadikan warna peluncur daripada satu nilai warna kepada nilai warna yang lain. background

/* 垂直滚动条样式 */
/* 宽度 */
::-webkit-scrollbar {
    width: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #a1a1a1, #6b6b6b);
}

/* 水平滚动条样式 */
/* 高度 */
::-webkit-scrollbar {
    height: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to right, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #a1a1a1, #6b6b6b);
}

Kecerunan linear CSS digunakan di sini. Kesan kecerunan antara peluncur dan warna latar belakang boleh menjadikan gaya bar skrol lebih lembut.

3. Sembunyikan bar skrol

Dalam beberapa situasi tertentu, anda mungkin perlu menyembunyikan bar skrol. Pada masa ini, kita boleh menggunakan dua atribut

dan scrollbar-width untuk menetapkan lebar atau ketinggian bar skrol kepada 0. Walau bagaimanapun, kaedah ini hanya boleh menyembunyikan bar skrol pada tahap tertentu, kerana apabila tetikus bergerak, bar skrol masih akan muncul secara automatik dan menukar kedudukannya semasa tetikus bergerak. scrollbar-height

body {
    scrollbar-width: none; /* 隐藏垂直滚动条 */
    -ms-overflow-style: none; /* 隐藏IE/Edge浏览器的垂直滚动条 */
}

/* 设置最外层容器的高度 */
.scroll-container {
    height: 500px;
    overflow-y: scroll; /* 自动出现滚动条 */
}

Dalam kod di atas, kami menetapkan

kepada tiada untuk menyembunyikan bar skrol menegak. Pada masa yang sama, untuk menjadikan bar skrol muncul secara automatik, kami menetapkan atribut scrollbar-width kepada tatal, supaya apabila halaman melimpah ke bekas, bar skrol akan muncul secara automatik. overflow-y

Perlu diambil perhatian bahawa tetapan gaya bar skrol penyemak imbas IE dan Edge perlu menggunakan atribut

, jadi beri perhatian lebih. -ms-overflow-style

4. Sesuaikan sudut bulat dan kesan bayang bar skrol

Akhir sekali, kami boleh menambah beberapa kesan visual yang lebih jelas pada bar skrol, seperti bucu bulat dan bayang. Kita boleh menggunakan atribut CSS

untuk mengawal sudut bulat dan atribut border-radius untuk menambah kesan bayangan. box-shadow

/* 垂直滚动条样式 */
/* 宽度 */
::-webkit-scrollbar {
    width: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #a1a1a1, #6b6b6b);
    border-radius: 5px; /* 圆角 */
    box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 阴影 */
}

/* 水平滚动条样式 */
/* 高度 */
::-webkit-scrollbar {
    height: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to right, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #a1a1a1, #6b6b6b);
    border-radius: 5px; /* 圆角 */
    box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 阴影 */
}

Dalam kod di atas, kami menambah sudut bulat dan kesan bayangan pada peluncur bar skrol untuk menjadikan bar skrol kelihatan lebih tiga dimensi.

Ringkasnya, melalui sifat CSS yang berkaitan, kami boleh menyesuaikan gaya bar skrol dengan mudah, dengan itu menjadikan halaman lebih diperibadikan dan meningkatkan pengalaman pengguna. Kod di atas adalah untuk rujukan sahaja, pembaca boleh mereka bentuk gaya bar skrol yang lebih fleksibel mengikut keperluan mereka sendiri.

Atas ialah kandungan terperinci CSS menetapkan gaya bar skrol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!