Bagaimana untuk menyembunyikan gaya bar skrol dalam css

Dalam reka bentuk web, menyembunyikan bar skrol ialah keperluan gaya biasa. Apabila kandungan halaman web agak mudah, atau perlu untuk mencapai kesan gelongsor yang serupa dengan antara muka APP, menyembunyikan bar skrol boleh meningkatkan pengalaman pengguna dengan lebih baik. Melalui teknologi CSS, kami boleh menyesuaikan gaya bar skrol dengan mudah.

1. Cara menyembunyikan bar skrol

1 Gunakan kod CSS

/Sembunyikan bar skrol/
::-webkit -scrollbar {

display: none;

}

Dalam kod CSS ini, dengan menetapkan atribut "display: none", kita boleh menghentikan bar skrol daripada dipaparkan. Walau bagaimanapun, kaedah ini hanya berkesan untuk penyemak imbas dengan teras WebKit (seperti Chrome, Safari, dll.), dan terdapat beberapa isu keserasian.

2. Gunakan kod JavaScript

/Sembunyikan bar skrol/
window.onload=function() {

//隐藏滚动条
document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden'; //针对火狐浏览器

//禁止滚动条滚动
document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden';

}

Melalui kod JavaScript, kita boleh menggunakan "document.documentElement.style.overflow='hidden'" untuk menyembunyikan bar skrol penyemak imbas. Walau bagaimanapun, kaedah ini mesti memuatkan semua halaman sebelum ia boleh berkuat kuasa dan akan menjejaskan reka letak beberapa tapak web.

3. Gunakan teknologi pemalam

Untuk sesetengah pereka web yang tidak biasa dengan teknologi seperti CSS atau JavaScript, anda boleh mempertimbangkan untuk menggunakan pemalam bar skrol pihak ketiga, seperti iScroll, perfect-scrollbar, nicescroll, dsb. Pemalam ini boleh menyembunyikan bar skrol dan mencantikkan kesan gelongsor dengan menambahkan kod CSS atau JavaScript tertentu.

2. Kaedah untuk mencantikkan bar skrol

Selain menyembunyikan bar skrol, kami juga boleh mencantikkan bar skrol melalui teknologi CSS. Dalam spesifikasi CSS3, atribut gaya bar skrol baharu disediakan untuk mencapai kesan bar skrol yang lebih kaya.

1. Tukar warna bar skrol

/Tukar warna bar skrol/
::-webkit-scrollbar {

width: 10px;
height: 10px;
background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

Dalam kod CSS ini, dengan menetapkan "webkit-scrollbar" atribut, kami Anda boleh menentukan lebar, ketinggian dan warna latar belakang bar skrol. Dengan menetapkan sifat "webkit-scrollbar-thumb", kita boleh menentukan warna dan gaya sempadan kawasan operasi tetikus bar skrol.

2. Tukar bentuk bar skrol

/Tukar bentuk bar skrol/
/Bar skrol menegak/
: :-webkit-scrollbar {

width: 10px;
background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

/Bar skrol mendatar/
::-webkit-scrollbar {

height: 10px;
background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

Dua keping kod CSS di atas mentakrifkan gaya masing-masing untuk bar skrol menegak dan mendatar. Dengan menukar nilai atribut "lebar" atau "tinggi", kita boleh menukar lebar dan ketinggian bar skrol. Pada masa yang sama, dengan menetapkan nilai atribut "jejari sempadan", kita juga boleh menukar gaya sempadan bar skrol.

3. Contoh Demonstrasi

Melalui teknologi CSS, kita boleh mencapai matlamat untuk menyembunyikan bar skrol dan mencantikkan kesan skrol. Berikut ialah contoh demonstrasi mudah yang menunjukkan cara menggunakan kod CSS untuk mencapai kesan "sembunyikan bar skrol" dan "tukar bentuk bar skrol".

Kod HTML:

<div class="content">
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
</div>

Kod CSS:

/Sembunyikan bar skrol/
.kandungan::-webkit-scrollbar {

display: none;

}

/Tukar bar skrol Bentuk /
.content::-webkit-scrollbar {

width: 10px;
background-color: #F5F5F5;

}

.content::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

.bekas {

width: 400px;
height: 300px;
overflow: auto;

}

.kandungan p {

font-size: 18px;
line-height: 30px;
text-indent: 2em;
color: #666666;

}

dalam Dalam contoh demonstrasi ini, kami menetapkan atribut "overflow: auto" untuk mencapai kesan tatal apabila kandungan halaman web melebihi ketinggian bekas. Pada masa yang sama, kami juga menetapkan nilai sifat "::-webkit-scrollbar" dan "::-webkit-scrollbar-thumb" untuk mencapai kesan menyembunyikan bar skrol dan menukar bentuk skrol bar.

Ringkasan:

Bar skrol ialah salah satu elemen interaktif biasa dalam halaman web, yang boleh membantu pengguna menyemak imbas dan melihat kandungan web dengan lebih baik. Melalui teknologi CSS, kami boleh menyesuaikan gaya bar skrol untuk meningkatkan pengalaman pengguna dengan lebih baik. Dalam pembangunan projek sebenar, sebagai tambahan kepada kaedah dalam contoh demonstrasi di atas, kami juga boleh mencapai kesan bar skrol yang lebih berwarna dengan menambahkan imej latar belakang dan menukar gaya bar skrol secara dinamik.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan gaya bar skrol dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!