#javascript #html #css #webkit #scrollbar
#язык JavaScript #HTML #CSS #webkit #полоса прокрутки
Вопрос:
Я хочу изменить цвет ширины и высоту полосы прокрутки только моей боковой панели на панели мониторинга. Я видел на многих страницах, что полоса прокрутки браузера и конкретный контейнер(со свойством переполнения) отличаются. когда я пытаюсь изменить его свойство полосы прокрутки, полоса прокрутки браузера тоже меняется. Поэтому кто-нибудь, пожалуйста, помогите мне изменить свойства определенной полосы прокрутки контейнера. Спасибо.
Ответ №1:
.container{ height:100px; overflow:auto; display: block; } .container::-webkit-scrollbar{ width:5px; background-color:#000; } .container::-webkit-scrollbar-thumb{ background:red; border-radius:5px; } lt;div style="height:800px"gt; lt;div class="container"gt; lt;pgt;A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.lt;/pgt; lt;/divgt; lt;/divgt; Ответ №2:
Это довольно просто. Вы можете сделать это с помощью -webkit-scrollbar .
HTML
lt;div class="custom-scroll"gt; lt;/divgt; CSS
.custom-scroll { overflow: auto; } .custom-scroll::-webkit-scrollbar { width: 10px; } .custom-scroll::-webkit-scrollbar-track { background: red; } .custom-scroll::-webkit-scrollbar-thumb { background: grey; } Ответ №3:
Вы можете изменить полосу прокрутки любого контейнера, как это:
.container{ overflow: scroll; height: 100px; background-color: yellow; display: block; } .container::-webkit-scrollbar { width: 5px; height: 8px; background-color: black; } .container::-webkit-scrollbar-thumb { background: red; } .inner-container{ height: 800px; } lt;div class="container"gt; lt;div class="inner-container"gt;inner containerlt;/divgt; lt;/divgt;