Warna Bar Skrol

Bar skrol ialah bar boleh alih, biasanya terletak di bahagian paling kanan atau di bahagian bawah skrin anda. Bar skrol sama ada dipasang secara mendatar atau menegak, membolehkan pengguna mengalihkan tetingkap ke atas dan ke bawah atau ke kanan dan kiri. Dalam erti kata lain, bar skrol ialah widget atau teknik yang mencipta interaksi antara pengguna dan paparan tetingkap sistem, yang menatal gambar berterusan atau teks atau apa-apa jenis paparan. Bar skrol mengandungi 'BAR' atau biasa dikenali sebagai 'TRACK', dan bar ini mempunyai 'THUMB' yang digunakan untuk mengalihkan kandungan tetingkap, ke atas dan ke bawah atau ke kanan dan kiri. Dalam topik ini, kita akan belajar tentang Warna Bar Skrol.

Secara amnya, bar skrol yang anda temui biasanya berbentuk blok dan berwarna kelabu. Tetapi warna lalai dan sifat lain bar skrol boleh dimanipulasi dan disesuaikan menggunakan CSS atau JavaScript, atau kedua-duanya.

Dalam bahagian yang akan datang, kami akan mencuba dan mencipta bar skrol yang dimanipulasi menggunakan CSS dan Javascript.

Penyesuaian Warna Bar Skrol

Sifat warna hanya membantu untuk menetapkan warna yang berbeza, selain daripada kelabu lalai untuk 'ibu jari' dan warna trek biasa. Kita semua tahu bahawa warna kawasan latar belakang untuk bar skrol (yang biasanya ditetapkan tidak kira ke arah mana pengguna menatal) dikenali sebagai 'TRACK'. Dan bahagian yang bergerak, yang sebenarnya menatal bersama tetingkap menatal, ia terapung di atas trek, dipanggil 'IBU JARI'.

Di bawah ialah gambar contoh visual yang menerangkan trek dan ibu jari.

Imej di atas ialah gambaran ringkas halaman web dengan maklumat yang melimpah. Pengguna perlu mengklik pada ibu jari dan menyeretnya ke arah atas dan bawah untuk melihat maklumat lengkap.

Bar Tatal yang boleh dilihat dalam imej di atas ialah Bar Tatal berasaskan Pelayar Lalai dengan nilai lalainya. Kami terus bercakap tentang nilai lalai; mari lihat mereka juga.

• : Mentakrifkan warna bar skrol anda dan nilai lalai yang dibawanya seperti di bawah:
• auto: 'auto' ialah sifat lalai untuk trek bar skrol jika pengaturcara tidak memberikan sebarang warna atau sifat tertentu.
• gelap: sifat 'gelap', apabila disediakan, menunjukkan bar skrol gelap yang boleh menjadi salah satu rona gelap warna yang disediakan oleh penyemak imbas atau platform anda atau rona gelap bagi warna yang ditakrifkan oleh awak.
• cahaya: sifat 'cahaya' menunjukkan warna yang lebih terang pada platform yang disediakan atau warna yang anda tetapkan untuk bar skrol.
• : Warna pertama menandakan warna untuk ibu jari bar skrol, dan warna kedua mewakili warna untuk trek.

kelemahan harta adalah terhad dan hanya disokong pada pelayar dengan versi tertentu dan ke atas. Sebagai contoh, sifat itu disokong oleh Chrome pada versi 81 dan ke atas, begitu juga dengan Firefox pada 72 dan ke atas, dan seterusnya. Untuk mengelakkan ini, kami menggunakan sifat lain yang dipanggil sifat '-webkit-'.

Pelayar seperti Opera, Chrome, Safari ialah penyemak imbas -webkit- dan dengan itu menyokong elemen pseudo bukan standard yang dipanggil, elemen ":: -webkit-scrollbar", yang membolehkan kami membuat perubahan pada bar skrol kami dengan mudah tanpa mengira pelayar.

Sifat ditetapkan kepada 'auto' secara lalai, yang, apabila dimanipulasi, boleh mencipta visual yang sangat menarik. Elemen ini ditambahkan di bahagian atas kod anda (lihat di bawah) dalam bahagian untuk menyesuaikan sifat bar skrol lalai penyemak imbas.

Contoh Warna Skrol

Kami mencipta contoh bar skrol mudah berikut dengan lebar 18 piksel. Kami memberikannya warna tack kuning dengan bar hijau berdaun atau warna pemegang.

<style>
/* width */
::-webkit-scrollbar {
width: 18px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f120;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #881;
}
</style>

Satu lagi sifat boleh ditambahkan pada bar atau pemegang, ‘::-webkit-scrollbar-thumb:hover’, yang membantu anda menetapkan warna yang berbeza pada bar skrol anda apabila ia telah dilegarkan.

Untuk menambah sifat 'legar atas' pada bar atau pemegang kami, kami hanya perlu menambah baris kod berikut pada skrip kami;

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520;
}

Dan hasilnya boleh dilihat dalam tangkapan skrin di bawah:

Bar berwarna hijau berdaun kami bertukar kepada Coklat apabila dilayangkan.

Mari lihat satu lagi contoh meneroka lebih banyak hartanah. Dalam contoh berikut, kami melicinkan bar dan ibu jari kami menggunakan sifat jejari sempadan. Perkara yang menarik ialah mencipta butang untuk pengguna mudah menggerakkan bar pada trek dengan mengklik pada butang dan bukannya menyeret bar.

Kami telah menambah kod di bawah untuk mencipta butang tersuai kami sendiri:

/* Custom Button */
::-webkit-scrollbar-button:single-button {
background-color:none;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}

The above will simply display the area with a border where our buttons will appear, as shown below. This will need some customization as well.

After our customization (see the code added) is done, we get the final result. See the results for yourselves:

Complete code is given below:

<head>
<style>
/* Custom width for the Scrollbar */
::-webkit-scrollbar {
width: 18px;
}
/* Custom Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
background: #f1f120;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #881;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520;
}
/* Custom Button */
::-webkit-scrollbar-button:single-button {
background-color:none;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
/* Custom Up Direction Button */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0px 8px 9px 8px;
border-color: transparent #881;
border-radius: 10px;
}
/* Custom Down Direction Button */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 0px 8px 9px 8px;
border-color: transparent #881;
border-radius: 10px;
}
</style>
</head>

SimpleBar: A JavaScript Library

There is always another way to implement elements in your project. A custom scroll bar can also be added with the help of jquery plugins and javascript libraries, popular in the web market. For example, SimpleBar is the new Javascript library that makes it easier for the author to create customized scrollbars.

It’s a standalone library that adds a scroll bar to any scrollable element or component, or container which might have overflowing content. This javascript library makes your content dynamic and keeps the native scroll behavior. A simple demo is shown below.

Customization

You can easily use these javascript libraries by installing and importing them into your projects or directly including them and their CSS files (if any) on to your HTML page. In the below example, we will be using the second option, directly including a javascript library into our program.

<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
<strong> </strong><script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script>

Adding these two lines to your HTML page will include and attach a remote file that can not be edited to your HTML like this; Next, we will add, ‘data-simplebar’ attribute to the division or the content, which will be the scrollable container of your HTML page. In our example, we added this attribute to the tag itself. Along with this, we will require a sample text; I have added ‘Lorem Ipsum’ default text to our tag to make the web page scrollable. And that is it. Simple right? When this is all done, your web page will look like this –> But it’s still raw and a bit ugly. I have done a few tweaks, as shown below, and see the results for your selves. The full code for CSS is given below, along with the results.

<style>
:root {  --primary: #212123;
}
body, html{          height: 100vh;
}
body{      background: var(--primary);
font-family:Georgia, "Times New Roman", Times, serif;
color: #fff;
display:grid;
grid-columns:60% auto;
margin: 0;
}
p{                            margin: 1em;
padding: 1em;
background-color: #333;
border-radius:10px;
color: #99F;
}
h2 {         color: #996;
}
.simplebar-scrollbar:before{background-color:#0F0;
}
.simplebar-scrollbar{margin-right:3px;
}
</style>

And the result is, as you can see below;

You can manually configure the javascript libraries as well, but then you need to initialize them first and then configure them; an option is known as ‘override’ is used, passing the object as a parameter of our Simplebar Function.

You can design it as you want since this library is lightweight. It has a simplebar.js file, a vanilla javascript custom scroll bar plugin that ensures great performance and works with all browsers.

Atas ialah kandungan terperinci Warna Bar Skrol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!