css — Как сделать скроллбар у класса, убрав его с body html?

Вопрос задан

Изменён 1 год 3 месяца назад

Просмотрен 115 раз

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

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

<body>
    <div>
        <div>
            <div>
                <nav>
                    <a href="main.html"><img src="logo_w3s.gif"></a>
                    <a href="#">Info</a>
                    <a href="news.
 
 html">News</a>
                    <a href="contacts.html">Contacts</a>
                </nav>
                <nav>
                    <a href="#">≡</a>
                </nav>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                <div>
                    <div>Dear</div>
                    <div>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>
                    <div>Dear</div>
                    <div>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 скроллбара не появилось.

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

  • html
  • css
  • scrollbar

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

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.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Кастомные и нативные скроллбары в веб-приложениях

Подобно контекстным меню, скроллбары (полосы прокрутки) настолько распространены, что пользователи, разработчики софта и дизайнеры редко о них задумываются.

Несмотря на то, что в прошлом они выглядели и вели себя одинаково, полосы прокрутки еще не до конца согласованы в разных системах и платформах. Скроллбары в Windows 10 не сильно изменились по сравнению с Windows 95 (разрыв в 20 лет!) — они по-прежнему имеют две кнопки и перетаскиваемый ползунок. С другой стороны, macOS под влиянием увеличения использования трекпада вместо мыши, и повсеместного распространения устройств с сенсорным экраном, со временем полностью обновила полосы прокрутки.

История скроллбара

Скроллбары веб-приложений

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

Вот три примера совершенно разных веб-приложений, которые решили создавать кастомные полосы прокрутки. С их помощью приложения могут детально контролировать скролл, добавлять функции, характерные для конкретного варианта использования, или просто обеспечивать согласованность интерфейса на различных платформах.

В этой статье мы разберем, как веб-приложения могут использовать кастомные скроллбары для улучшения пользовательского опыта, а также рассмотрим несколько передовых методов, которые, по нашему мнению, хорошо работают в приложении Height.

Целостный опыт

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

Height — это приложение, которое работает в основном в Интернете. С нативными скроллбарами это означало бы, что разные браузеры/операционные системы будут отображать Height по-разному, и что использование другого устройства скролла радикально изменит способ отображения Height.

Скроллбары в Windows и macOS с колесиком прокрутки занимают больше пространства, и активно сокращают отображаемый контент, даже когда не используются. Height расширил концепцию скрытой полосы прокрутки в macOS и еще больше уменьшил область ее действия. Важно, что мы отображаем этот тип скроллбара на всех платформах, это делает работу Height на Windows такой же приятной, как и на macOS.

При проектировании интерфейса для невидимых скролбаров нам нужно обратить внимание на невидимый трек, чтобы избежать наложения кроллбара на контент.

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

Применяя эти две концепции вместе, мы можем получить чистый пользовательский интерфейс, независимо от устройства скролла или операционной системы. Вот как Height эволюционировал от использования нативных полос прокрутки к кастомным:

Кастомные скроллбары позволяют Height оставаться одинаковым на разных платформах и не перегружать пользователей видимыми треками.

Улучшите обнаружение

Невидимые скроллбары иногда затрудняют обнаружение скрытого контента. В macOS полосы прокрутки отображаются только при скролле, что затрудняет их обнаружение или даже осознание того, что может быть больше контента, скрытого от глаз.

Также становится трудно скроллить, перетаскивая сам скроллбар, так как он очень быстро исчезает после скролла.

В приложении Height мы отображаем скроллбары при наведении курсора на область прокрутки. Это решает обе проблемы, сохраняя при этом интерфейс незагроможденным.

Добавьте кастомное поведение

Поскольку мы создали полностью кастомные скроллбары, мы получили полный контроль над тем, когда их отображать. На досках Kanban для целей сканирования мы решили постоянно отображать скроллбары. Поскольку мы сделали их чрезвычайно компактными, они не перегружают интерфейс.

Поскольку Kanban — визуальный инструмент, мы хотели, чтобы пользователи примерно понимали, сколько задач содержится в каждом столбце.

VSCode — еще один отличный пример кастомного поведения. Их скроллбары имеют большой трек, который используется для указания пользователю, где в файле возникают ошибки или результаты поиска.

VSCode добавляет результаты поиска в трек скроллбара

Эффективная реализация

Наиболее важным аспектом кастомных скроллбаров является производительность.

Скроллинг должен оставаться плавным и не зависеть от возможной медлительности вашего компьютера.

Несколько советов для наилучшей производительности:

  • Сохраняйте базовый скролл нативным: не переопределяйте его с помощью javascript, пусть этим занимается браузер. На практике это означает сохранение свойства CSS overflow, но скрытие нативных скроллбаров.
.ScrollView {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ScrollView::-webkit-scrollbar {
 display: none;
}
Войти в полноэкранный режимВыход из полноэкранного режима
  • Избегайте сбоев макета при рендеринге или измерении скроллбаров. Простой способ сделать это — использовать fastdom.
  • Убедитесь, что скроллинг не происходит в основном треде. Чтобы обнаружить потенциальные проблемы, вы можете включить в инструментах разработчика GoogleChrome Rendering → Scrolling performance issues

Включение панели рендеринга «…» → Moretools → Rendering

Таким образом, кастомные полосы прокрутки могут помочь:

  • Контролировать, как и когда полосы видны
  • Поддерживать единообразный скролл на разных платформах
  • Добавить к полосам прокрутки программно-зависимые функции

Учитывая все обстоятельства, создание кастомных скроллбаров — это инвестиция. Если все сделано плохо, неинтуитивные или неэффективные полосы прокрутки могут нанести ущерб пользовательскому опыту. Но если все сделано правильно, они могут значительно улучшить ваше приложение, оставаясь при этом невидимыми для конечного пользователя.

Есть вопросы или мысли? Пишите в комментариях.

Перевод статьи height.app

Custom Scroll — Etsy Turkey

Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных. Пожалуйста, обновите до последней версии.

Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.

Найдите что-нибудь памятное, присоединяйтесь к сообществу, делающему добро.

( 1000+ релевантных результатов, с рекламой Продавцы, желающие расширить свой бизнес и привлечь больше заинтересованных покупателей, могут использовать рекламную платформу Etsy для продвижения своих товаров. Вы увидите результаты объявлений, основанные на таких факторах, как релевантность и сумма, которую продавцы платят за клик. Узнать больше. )

  • цвет полосы прокрутки | CSS-трюки — CSS-трюки

    DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

    Свойство scrollbar-color управляет двумя цветами полосы прокрутки: цветом для бегунка и цветом для дорожки . scrollbar-color является частью черновика уровня 1 модуля полос прокрутки Рабочей группы CSS, работа над которым на момент написания этой статьи еще не завершена.

    До scrollbar-color у разработчиков не было стандартного способа изменить внешний вид полос прокрутки браузера по умолчанию, не прибегая к сокрытию полосы прокрутки с помощью overflow: hidden и рендерингу полос прокрутки на основе JavaScript или использованию атрибутов полосы прокрутки с префиксом браузера. С другой стороны, с помощью scrollbar-color мы можем стилизовать полосу прокрутки в соответствии с дизайном, не прибегая к переделке функциональности браузера или использованию префиксов поставщиков.

     .scrollable-элемент {
  цвет полосы прокрутки: красный желтый;
}
    Сходите с ума с пользовательскими цветами

    scrollbar-color также будет принимать значения темный и светлый в соответствии с предпочтениями пользователя, если он использует что-то вроде темного режима на Mac OSX.

     .scrollable-элемент {
  цвет полосы прокрутки: темный;
}

    По состоянию на март 2019 г. поддержка значений темный и светлый недоступна ни в одном браузере. поддерживается в Firefox. Подробности смотрите в разделе поддержки браузеров ниже.

    Синтаксис 

     цвет полосы прокрутки: авто | темный | свет | <цвет>;

    Значения

    scrollbar-color принимает следующие значения:

    • auto является значением по умолчанию и отображает стандартные цвета полосы прокрутки для пользовательского агента.
    • dark скажет пользовательскому агенту использовать более темные полосы прокрутки, чтобы соответствовать текущей цветовой схеме.
    • light скажет пользовательскому агенту использовать более светлые полосы прокрутки, чтобы соответствовать текущей цветовой схеме.
    • указывает два цвета, которые будут использоваться для полосы прокрутки. Первый цвет предназначен для «большого пальца» или подвижной части полосы прокрутки, которая появляется сверху. Второй цвет предназначен для «дорожки» или фиксированной части полосы прокрутки.

    Пример

    Это сочетание нового синтаксиса спецификации и префикса WebKit.

    Поддержка браузера

    Рабочий стол
    Chrome Firefox IE Edge Safari
    114* 113 11 111* TP*

    Mobile / Tablet
    Android Chrome Android Firefox Android iOS Safari
    111* No 111* 13.

    No related posts.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *