လုပ်နည်း - စိတ်ကြိုက် Scrollbar
CSS ဖြင့် စိတ်ကြိုက် scrollbar တစ်ခုဖန်တီးနည်းကို လေ့လာပါ။
စိတ်ကြိုက် Scrollbars
မှတ်ချက်- စိတ်ကြိုက် scrollbar များကို Firefox သို့မဟုတ် Edge တွင်၊ ယခင်ဗားရှင်း 79 တွင် မပံ့ပိုးပါ။
စိတ်ကြိုက် Scrollbars ဖန်တီးနည်း
::-webkit-scrollbar
Chrome၊ Edge၊ Safari နှင့် Opera တို့သည် ကျွန်ုပ်တို့အား ဘရောက်ဆာ၏ scrollbar ၏အသွင်အပြင်ကို ပြင်ဆင်နိုင်စေသည့် စံမဟုတ်သော pseudo ဒြပ်စင်ကို ပံ့ပိုး ပေးပါသည်။
အောက်ဖော်ပြပါ ဥပမာသည် မီးခိုးရောင်လမ်းကြောင်း/ဘားအရောင်နှင့် မီးခိုးနက် (#888) လက်ကိုင်ပါရှိသော ပါးလွှာသော (10px အကျယ်) scrollbar ကို ဖန်တီးသည်-
ဥပမာ
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
ဤဥပမာသည် box shadow ဖြင့် scrollbar ကိုဖန်တီးသည်-
ဥပမာ
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Scrollbar ရွေးချယ်မှုများ
webkit ဘရောက်ဆာများအတွက်၊ သင်သည် ဘရောက်ဆာ၏ scrollbar ကို စိတ်ကြိုက်ပြင်ဆင်ရန် အောက်ပါ pseudo ဒြပ်စင်များကို အသုံးပြုနိုင်ပါသည်။
::-webkit-scrollbar
scrollbar::-webkit-scrollbar-button
scrollbar ပေါ်ရှိ ခလုတ်များ (အပေါ်နှင့် အောက်သို့ညွှန်ပြသော မြှားများ)။::-webkit-scrollbar-thumb
ဆွဲဆန့်နိုင်သော လက်ကိုင်။::-webkit-scrollbar-track
scrollbar ၏လမ်းကြောင်း (တိုးတက်မှုဘား) ။::-webkit-scrollbar-track-piece
ခြေရာခံ (တိုးတက်မှုဘား) လက်ကိုင်ဖြင့်မဖုံးထားပါ။::-webkit-scrollbar-corner
အလျားလိုက်နှင့် ဒေါင်လိုက် scrollbar နှစ်ခုလုံးတွေ့ဆုံသည့် scrollbar ၏အောက်ခြေထောင့်။::-webkit-resizer
ဒြပ်စင်အချို့၏အောက်ခြေထောင့်တွင်ပေါ်လာသောဆွဲငင်ဆန့်နိုင်သောအရွယ်အစားလက်ကိုင်။