Искл., ежели содержимым является элемент, у которого свойство position имеет значение fixed .
длина окна:
div тысячадевятьсотдевяностодевятикилограммовый
То есть если элемент при direction: ltr; уводить за левый (при direction: rtl; — за правый) край страницы, то горизонтальной полосы прокрутки не будет.
direction: rtl;
body div < -webkit-margin-start: -10em; /* отсутствует в W3C */ margin-inline-start: -10em; > тысячадевятьсотдевяностодевятикилограммовый
Можно запретить появление горизонтальной полосы прокрутки и обрезать выходящее за страницу содержимое, но это лишь усугубит проблему — чтобы читатель имел возможность прокрутить страницу, нужно будет разрабатывать и подключать JavaScript
длина окна:
html, body тысячадевятьсотдевяностодевятикилограммовый
Следует доработать вёрстку: при отзывчивой, сделанной специалистом, хорошо разбирающимся в CSS, проблем не должно возникать
длина окна:
body тысячадевятьсотдевяностодевятикилограммовый
Источник: shpargalkablog.ru
Css урок. Полоса прокрутки как у YouTube
Как скрыть полосы прокрутки?
Метод основан на использовании CSS свойства overflow, которое определяет, как будет отображаться содержимое блочной структуры, если оно (содержимое) превышает размеры родительского элемента.
Из всех возможных значений данного свойства нас интересует значение «hidden»:
overflow: hidden;
которое задает браузеру инструкцию «отобразить поместившийся контент, что не влезло — скрыть»
Применив это свойство к селектору body или html можно добиться исчезновения полос прокрутки.
DOCTYPE html> html> head> meta charset=»UTF-8″> title> Убираем скролл title> head> body> div>div> body> html>
div height: 2800px; >
Как видим, у нас есть девственно-чистая страница высотой 2800px с полосой вертикального скролла. Теперь добавим в каскадную таблицу стилей строчку:
html overflow: hidden; >
и обновим страничку.
Также можно применять свойства overflow-y (overflow-x) для управления отображением не вместившегося контента только по вертикали (горизонтали). Т.е., исходя из рассматриваемого контекста, можно скрыть только вертикальную (горизонтальную) полосу прокрутки.
- CSS не скрывает полосы прокрутки, а всего лишь создает браузеру условия, при которых нет необходимости их выводить. Это значит, что вместе с скролл-барами у вас пропадет и скролл-функция, и «не вмещающийся контент» будет недоступен для просмотра!
- Перед использованием данного приема, хорошо подумайте — нужен ли вам он вообще. Ведь маленький недочет и можно потерять полезную информацию из поля зрения.
- Наиболее оправданным будет применение overflow: hidden в следующих случаях:
- Вывод маленькой страницы, которая априори поместится полностью на экране (например, страницы ошибки, страницы авторизации и т.д. ).
- Вывод небольших web-форм
- Скрытие полос прокрутки при создании собственного каcтомного скролл-бара.
Послесловие
Чаще всего к этой теме web-мастера приходят тогда, когда яркий авторский дизайн сайта сходит на ноль из-за «приевшегося» стандартного вида системного скролл-бара. Да, бывает и такое. В таком случае, существует несколько вариантов решения проблемы:
Как убрать полосу прокрутки в Google Chrome
Кастомизовать системные полосы прокрутки.
На сегодняшний день более-менее гибкую настройку позволяют выполнять браузеры на базе webkit.
В нашем распоряжении есть достаточно широкий набор псевдоэлементов, отвечающих за структурные части скролл-баров, и псевдоселекторов, помогающих кастомизировать внешний вид структурных частей в различных состояниях.
Преимущества:
- Системный скролл гораздо производительнее JavaScript-симуляторов, реализует все «фишки» операционной системы устройства, сохраняется кросс-платформенность.
- Нет никаких гарантий, что браузеры на других (не webkit) движках смогут осознать всю «тонкость душевной организации» вашего сайта (кастомизация скорее всего не произойдет).
Скрыть системные полосы прокрутки, и использовать JavaScript-эмулятор.
Казалось бы, вполне логично: хочешь кросс-браузерности — используй JavaScript. Но в данном случае это жестокое заблуждение.
Дело в том, что в этом случае JavaScript приходится обрабатывать системные события связанные со скроллом. А интерфейс этих событий значительно отличается для каждого браузера, не говоря уже о разных платформах. Учтите эту информацию при использовании «готовых» j-скроллеров (особенно, когда на странице источника заявляют о полной «кросс» без подтверждения).
Преимущества
- Безграничная по глубине кастомизация.
- Производительность эмулятора ниже производительности системной прокрутки.
- Нет гарантий кросс-браузерности и кросс-платформности.
Тема авторского универсального скролла будет более подробно рассмотрена в отдельной статье. Успешных Вам проектов.
Источник: vaden-pro.ru
Убрать сдвиг сайта при появлении полосы прокрутки
auto при переполнении блока с overflow: scroll; или overflow: auto; , сдвинув содержимое, появится полоса прокрутки stable для полосы прокрутки зарезервировано место с одной стороны stable both-edges для полосы прокрутки зарезервировано место с обеих сторон initial auto inherit наследует значение родителя unset auto
Папа у Васи силён в математике, Учится папа за Васю весь год. Где это видано, где это слыхано, — Папа решает, а Вася сдаёт?!
div < height: 6em; border: 1px solid darkgray; overflow: auto; scrollbar-gutter: auto; /* свойство scrollbar-gutter не наследуется, применяется к scrolling boxes */ > Содержимое
Если сайт размещён по центру окна браузера (содержимое ограничено зелёными линиями), то при переходе с короткой страницы на длинную, контент дёргается влево на небольшое расстояние, равное ширине вертикальной полосы прокрутки (scrollbar). В приведенном ниже примере нужно нажать на ссылку «Яблоко».
Чтобы сайт не сдвигался, можно полосу прокрутки добавить на все страницы сайта. Там, где она не нужна, scrollbar окрашен в серый неактивный цвет.
- Как убрать горизонтальную прокрутку
- Прокрутка модального окна
NMitra До появления scrollbar-gutter , можно было использовать решение с сайта aykevl.nl. Где 100vw — это ширина окна браузера с полосой прокрутки или без неё при её отсутствии.
Источник: shpargalkablog.ru