Как убрать глобальный скролл
Пользователи не любят читать документацию. Станьте оригинальным, будьте не как все. Ознакомьтесь с нашей базой знаний.
Страницы: 1
- Форумы
- » Поддержка пользователей
- » Убрать горизонтальную прокрутку для всех сайтов
№1 13-08-2012 17:48:23
slfly Участник Группа: Members Зарегистрирован: 14-03-2008 Сообщений: 59 UA: 14.0
Убрать горизонтальную прокрутку для всех сайтов
В многочисленных темах на форуме обсуждалось как убрать горизонтальный скроллбар:
добавление body в userContent.css
Тем не менее, это не устраняет необходимость горизонтальной прокрутки сайтов. Единственная идентичная тема, найденная в поиске была закрыта.
Проблема:
Firefox пошел по стопам удобства Opera и старается подстроить размер текста под ширину экрана при увеличении. Тем не менее, некоторые криворукие верстальщики жестко задают размеры элементов, которые должны быть «резиновыми» и при увеличении текст все равно разъезжается, заставляя волей-неволей пользоваться горизонтальным скроллом при увеличении масштаба.
Работающим решением может являться переопределение min-width css-cтиля страниц расширением типа Styler. Только для каждого сайта писать подобное было бы проблематично.
Решение, которое ищу:
Хочу задать глобальный запрет на минимальный размер через userChrome/userContent, например min-width=100%, чтобы все сайты стали «резиновыми». Тем не менее, у меня этого так и не получилось сделать никакими предлагаемыми решениями. С чем, собственно и прошу помочь.
Отредактировано slfly (13-08-2012 17:53:25)
Как сделать чтобы страница не дергалась? Когда убираем скроллбар?
Проблема такая, что когда открывается модальное окно, то используется правило overflow: hidden; чтобы отключить прокрутку. Это вызывает скрытие скроллбара, на виндовых устройствах скроллбар фиксированный когда исчезает дергает контент. Помогите советом как решить данный баг.
.popup < position: fixed; top: 0; left: 0; height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; visibility: hidden; z-index: 100; >.js-blockScroll < overflow-y: hidden; /*padding-right: 20px;*/ /*width: auto;*/ >Отслеживать
задан 29 сен 2020 в 9:07
369 1 1 золотой знак 4 4 серебряных знака 14 14 бронзовых знаков
Это не баг, а нормальное поведение браузеров. К какому блоку применяется overflow: hidden; ? Приведите разметку и стили.
29 сен 2020 в 9:12
узнать ширину скроллбара и при добавлении overflow: hidden этому же элементу (которому добавляется overflow: hidden ) добавлять padding-right: x , где х — ширина скроллбара
29 сен 2020 в 9:15
@UModeL привязал
29 сен 2020 в 9:16
@meine пробовал, не работает
29 сен 2020 в 9:17
как вы пробовали?
29 сен 2020 в 9:18
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Есть два решения этой проблемы:
1. Динамический сдвиг на ширину полосы прокрутки.
Для этого нужно динамически определять ширину прокрутки. У элемента html изначально должно быть overflow-y: scroll . Модальное окно при этом будет открываться со свойством position: fixed . Перед открытием модального окна, элементу html задается overflow: hidden , а элементу body задается margin-right: (ширина полосы прокрутки)px (при этом у обоих элементов не должны быть заданы ширины width ). Далее запускается слушатель события window resize , и при масштабировании окна, динамически корректируется margin-right: (ширина полосы прокрутки)px у элемента body .
При скрытии модального окна отключается слушатель window resize , убираются margin у body , а элементу html возвращается свойство overflow-y: scroll .
Ширину вертикальной и горизональной полосы прокрутки обычно определяют с помощью такой функции (попробуйте запустить ее при разных масштабах страницы):
var getScrollBarSize = (function() < var el = window.document.createElement('textarea'), style = < 'visibility': 'hidden', 'position': 'absolute', 'zIndex': '-2147483647', 'top': '-1000px', 'left': '-1000px', 'width': '1000px', 'height': '1000px', 'overflow': 'scroll', 'margin': '0', 'border': '0', 'padding': '0' >, support = el.clientWidth !== undefined && el.offsetWidth !== undefined; for (var key in style) < if (style.hasOwnProperty(key)) < el.style[key] = style[key]; >> return function() < var size = null; if (support && window.document.body) < window.document.body.appendChild(el); size = [el.offsetWidth - el.clientWidth, el.offsetHeight - el.clientHeight]; window.document.body.removeChild(el); >return size; >; >)(); console.log(getScrollBarSize());
У этого способа есть несколько особенностей. Полоса прокрутки всегда отбражается в настольных браузерах, независимо от содержания страницы. Правильная реализация должна учитывать направление контента dir=»ltr» или dir=»rtl» . Сдвигать придется не только body , но и все элементы, имеющие position: fixed позиционированные от той стороны с которой находится прокрутка. Последние версии браузера IE имеют баг с масштабированием полос прокруток (полосы прокрутки окна браузера и элементов имеют разную ширину, что не дает правильно определить ширину прокрутки).
2. Верстка слоями.
Создается глобальный элемент div >, и глобальный скролл переносится в него, а у элементов html , body — отключается:
html, body < height: 100%; overflow: hidden; >html > body > #wrapper
Все модальные окна, при этом, также размещаются внутри body , на одном уровне с элементом #wrapper . Тогда у вас вообще не будет проблем с полосами прокруток, так как у каждого слоя они будут свои. Но у этого способа есть несколько особенностей. В мобильных браузерах перестает скрываться панель инструментов браузера. Вместо position: fixed вы везде должны как-то обходится с помощью position: absolute , что иногда совсем не «гибко». Вам нужно также задать @media print стили для корректной печати такого сайта.
Как стилизовать или убрать полосу прокрутки — CSS скроллбар
Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.
Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.
Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.
1 Как убрать полосу прокрутки CSS
Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:
CSS /*Убрать полосу прокрутки у элемента*/ .element::-webkit-scrollbar { width: 0; } /*Убрать полосу прокрутки для всей страницы*/ ::-webkit-scrollbar { width: 0; } 2 Как изменить скроллбар CSS
Теперь давайте рассмотрим базовую структуру полосы прокрутки:
-webkit-scrollbar состоит различных псевдо-элементов.
- ::-webkit-scrollbar — это фон самого скроллбара.
- ::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
- ::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
- ::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.
Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.
HTML Document
3 CSS стили
Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.
CSS #element { overflow-y: scroll; background-color: #ffffff; width: 200px; height: 200px; } .overflow { min-height: 400px; }
Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd .
Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.
CSS #element::-webkit-scrollbar { width: 7px; background-color: #f9f9fd; }
Ширина полосы в 7 пикселей
Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.
CSS #element::-webkit-scrollbar-thumb { background-color: #223c50; }
Изменение цвета индикатора
Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.
CSS #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; }
Добавление внутренней тени
В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.
Пример 1
Пример 2
Пример 3
Пример 4
Пример 1 #element::-webkit-scrollbar { width: 10px; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #18aaaa; } #element::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f9f9fd; }
Пример 2 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #f2bf93; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%, transparent); }
Пример 3 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #356184; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .25)), color-stop(.5, transparent), to(transparent)); }
В четвертом примере мы используем градиент. Настроить его можно в CSS генераторе градиента.
Пример 4 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; border-radius: 10px; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient(180deg, #00c6fb, #005bea); }
Как отключить скролл css
Чтобы отключить скролл страницы в CSS, можно использовать свойство overflow для задания свойства hidden . Это свойство скрывает любой контент, который выходит за границы родительского элемента.
Например, если вы хотите отключить скролл на всей странице, вы можете добавить следующее правило в свой CSS файл:
body overflow: hidden; >
Это скроет скролл на странице, но также отключит и возможность прокрутки страницы. Если вы хотите отключить скролл только для определенного элемента, вы можете применить этот стиль к этому элементу:
.container overflow: hidden; >
Здесь мы применяем свойство overflow: hidden к элементу с классом container . Это скроет все контент, который выходит за границы элемента с классом container .
Если вы хотите отключить только горизонтальный или вертикальный скролл, вы можете использовать свойства overflow-x и overflow-y . Например:
body overflow-x: hidden; /* отключает горизонтальный скролл */ overflow-y: scroll; /* включает вертикальный скролл */ >
В этом примере мы отключаем горизонтальный скролл и включаем только вертикальный скролл на странице.