0

У меня есть страничка сайта, на которой я разместил заголовок и часть с контентом. Как видно на скриншоте, скроллбар справа находится не в части с контентом (черной), а на body или html (не знаю). Как сделать так, чтобы скроллбар находился под заголовком?

Попробовал в html документе сделать такую структуру страницы:

<body>

    <div class="main__header">
        <div class="container">
            <div class="header">
                <nav class="nav">
                    <a class="nav__link" href="main.html"><img src="logo_w3s.gif"></a>
                    <a class="nav__link active" href="#">Info</a>
                    <a class="nav__link" href="news.html">News</a>
                    <a class="nav__link" href="contacts.html">Contacts</a>
                </nav>
                <nav class="nav">
                    <a class="nav__link" href="#">≡</a>
                </nav>
            </div>
        </div>
    </div>

    <div class="main__field">
        <div class="container">

            <div class="section">
                <div class="section__inner">
                    <div class="section__title">Dear</div>
                    <div class="section__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt facere
                        nesciunt, unde dignissimos laboriosam quibusdam debitis id libero eaque veritatis! Nostrum
                        maiores distinctio eaque ipsam ipsa labore, assumenda quo dolorem.</div>
                </div>
            </div>

            <div class="section">
                <div class="section__inner">
                    <div class="section__title">Dear</div>
                    <div class="section__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt facere
                        nesciunt, unde dignissimos laboriosam quibusdam debitis id libero eaque veritatis! Nostrum
                        maiores distinctio eaque ipsam ipsa labore, assumenda quo dolorem.</div>
                </div>
            </div>

        </div>
    </div>

</body>

То есть создать класс под заголовок и под контент. И с помощью css'a спрятать скроллбар у body и сделать его у main__field. Спрятать получилось с помощью

body::-webkit-scrollbar {
    display: none;
}

Но в main__field скроллбара не появилось.

То есть я хочу, чтобы заголовок был во всю ширину страницы. Как-то так: введите сюда описание изображения

1 ответ 1

0

Сначала нужно спрятать основной скроллбар

body::-webkit-scrollbar {
    display: none;
}

Потом просто добавить его в элемент с контентом

.element::-webkit-scrollbar {
    width: 5px;
    background: #74e6cf;
    border-radius: 50px;
    box-shadow: inset 0 0 0 4px #ccc;
}

.element {
    overflow-y: scroll;
}

EDIT 1:

Немного неполный ответ. Скроллбар появляется там, где я хочу, но он, почему-то, состоит только из трека, без самого скролла (само пролистывание страницы работает).

EDIT 2:

Точно, нужно же в .element добавить max-height.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.