БЛОГ НА HUSL


Неправильно отображается scroll

Автор вопроса: Websocket

Когда я пытаюсь засунуть в блок блок у которого параметр height является max-content и у блока родителя я выставляю параметры overflow: hidden и overflow-y: auto, после чего пытаюсь стилизовать скролл родителя, он почему-то показывает его во весь рост.

Вот как выглядит скролл: Scroll

Вот код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        overflow: hidden;
        overflow-y: auto;
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
        height: 100%;
    }

    body::-webkit-scrollbar{
        width: 5px;
    }

    body::-webkit-scrollbar-track{
        background-color: red;
    }

    .main{
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .child{
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 25px;
        position: relative;
        width: 50%;
        height: max-content;
        margin-left: auto;
        margin-right: auto;
    }

</style>
<body>
    <div class="main">
        <div class="child">
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text
        </div>
    </div>
</body>
</html>

Источник

Ответы (2 шт):

Автор решения: Websocket

Нужно было еще добавить -webkit-scrollbar-thumb, чтобы задать ему цвет, поэтому его не видно было...

→ Ссылка
Автор решения: Евгений Ли

Пользуйся уже готовыми решениями

.text {
display: block;
overflow-Y: scroll;
height: 200px;
}

.text::-webkit-scrollbar {
    width: 5px;
}

.text::-webkit-scrollbar-track {
    background: #cccccc;
    border: 1px solid #cccccc;
    border-radius: 25px;
}

.text::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 25px;
}

.text::-webkit-scrollbar-thumb:hover {
    background: #9C9C9C;
}
<div class="text">
textМногие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32

Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 "de Finibus Bonorum et Malorum" Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.
Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32

Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 "de Finibus Bonorum et Malorum" Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.
Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32

Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 "de Finibus Bonorum et Malorum" Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.