Как изменить положение полосы прокрутки с помощью CSS?

Опубликовано: 5 Января, 2022

Функциями полосы прокрутки можно управлять с помощью CSS. Раньше это было невозможно, но с новыми версиями CSS это стало возможным для веб-дизайнера. Мы можем использовать свойство CSS «:: - webkit-scrollbar», которое отвечает за изменение формы, цвета, размера, оттенка, тени и т. Д. Полосы прокрутки. Но здесь мы будем использовать свойство direction CSS для изменения положения полосы прокрутки.

Примечание. Добавление базового свойства CSS к полосе прокрутки в каждом примере, чтобы она выглядела лучше.

Пример 1. В этом примере полоса прокрутки размещается с правой стороны элемента div (по умолчанию Condition).

 <!DOCTYPE html>
 < html >
     
< head >
    < title >Customize the scroll-bar</ title >
 
    < style >
        body {
            text-align: center;
        }
         
         
        /* Set the style of container
            div element */
        .Container{
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: green;
            border-radius: 5px;
            margin: 0 auto;
        }
        /* Set the effects to the division
            named content */
        .Content{
            height: 200px;
            color: white;
            text-align: center;
        }
         
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 6px;
        }
     
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }
     
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }
     
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </ style >
 </ head >
 
< body >
    < h1 style = "color:forestgreen;" >
        GeeksforGeeks
    </ h1 >
     
    < div class = "Container" >
        < div class = "Content" >
            GeeksforGeeks is a Computer Science
            portal for geeks. It contains well
            written, well thought and well
            explained computer science and
            programming articles, quizzes etc.
        </ div >
    </ div >
 </ body >
 
</ html > 

Вывод: вывод содержит полосу прокрутки черного цвета с правой стороны раздела.

Пример 2: Размещение полосы прокрутки слева от элемента div. Выделена разница между правой полосой прокрутки и кодом левой полосы прокрутки.

Вывод: черная полоса прокрутки отображается слева от элемента div.

Пример 3: Размещение полосы прокрутки внизу раздела.

 <!DOCTYPE html>
 < html >
     
< head >
    < title >Customize the scroll-bar</ title >
     
    < style >
        body {
            text-align: center;
        }
        .Container{
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: green;
            border-radius: 5px;
            margin: 0 auto;
        }
         
        .Content{
            width: 300px;
            color: white;
            text-align: center;
        }
         
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 5px;
        }
     
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }
     
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }
     
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </ style >
 </ head >
 
< body >
    <!-- HTML Code -->
    < h1 style = "color: green;" >
        GeeksforGeeks
    </ h1 >
     
    < div class = "Container" >
        < div class = "Content" >
            GeeksforGeeks is a Computer Science
            portal for geeks. It contains well
            written, well thought and well
            explained computer science and
            programming articles, quizzes etc.
        </ div >
    </ div >
 </ body >
 
</ html > 

Вывод: черная полоса прокрутки отображается внизу элемента div.

Пример 4: Размещение полосы прокрутки в верхней части элемента div. Выделена разница между нижним положением полосы прокрутки и верхним положением кода полосы прокрутки.

 <!DOCTYPE html>
 < html >
 
< head >
    < title >Customize the scroll-bar</ title >
     
    < style >
        body {
            text-align: center;
        }
        .Container{
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: green;
            border-radius: 5px;
            margin: 0 auto;
        }
         
        .Content{
            width: 300px;
            color: white;
            text-align: center;
        }
         
        .Flipped, .Flipped .Content{
            transform: rotateX(180deg);
        }
         
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 5px;
        }
     
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }
     
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }
     
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </ style >
 </ head >
 
< body >
    < h1 style = "color: green;" >
        GeeksforGeeks
    </ h1 >
     
    < div class = "Container Flipped" >
        < div class = "Content" >
            GeeksforGeeks is a Computer Science
            portal for geeks. It contains well
            written, well thought and well
            explained computer science and
            programming articles, quizzes etc.
        </ div >
    </ div >
 </ body >
 
</ html > 

Вывод: черная полоса прокрутки отображается в верхней части элемента div контейнера.

Примечание. Использование HTML и CSS также позволяет изменить положение полосы прокрутки веб-страницы влево от правой стороны страницы.

Пример 5: Размещение полосы прокрутки с левой стороны всей страницы .

 <!DOCTYPE html>
 < html >
     
< head >
    < title >Customize the scroll-bar</ title >
     
    < style >
        h1 {
            color: green;
            text-align: center;
        }
         
        /* Styling each content
            division in the page */
        .content1{
            background-color: orange;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content2{
            background-color: dodgerblue;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content3{
            background-color: blueviolet;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content4{
            background-color: tomato;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content5{
            background-color: crimson;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content6{
            background-color: lawngreen;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
         
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 5px;
        }
     
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }
     
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }
     
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </ style >
 </ head >
 
< body >
    < h1 style = "color:green;" >
        GeeksforGeeks
    </ h1 >
     
    < div class = "content1" >
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </ div >
    < br >
    < div class = "content2" >
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </ div >
    < br >
    < div class = "content3" >
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </ div >
    < br >
    < div class = "content4" >
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </ div >
    < br >
    < div class = "content5" >
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </ div >
    < br >
    < div class = "content6" >
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </ div >
 </ body >
 
</ html > 

Выход:

Пример 6: Выделена разница между обоими кодами.

 <!DOCTYPE html>
 < html >
     
< head >
    < title >Customize the scroll-bar</ title >
     
    < style >
        h1 {
            color: green;
            text-align: center;
        }
         
        /* Styling each content
            division in the page */
        .content1{
            background-color: orange;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content2{
            background-color: dodgerblue;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content3{
            background-color: blueviolet;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content4{
            background-color: tomato;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content5{
            background-color: crimson;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content6{
            background-color: lawngreen;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 5px;
        }
     
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }

                    
                                            Вопросы о Web технологиях 
                                            Picked
                                            HTML
                                            CSS-Misc
                                            HTML-Misc
                                            CSS
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИTrovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023
Показать самое длинное имя
27 Февраля, 2023
Форматирование лицензионного ключа
27 Февраля, 2023