Как убрать второй вертикальный скролл

EvgeniyaPronina / no scroll

Убрать полосы прокрутки полосу прокрутки, и запретить скролл(scroll) на сайте при помощи css или js когда нам она не нужна, например при отображении того же попап окна (popup window) или любого другого всплывающего элемента на странице (рекламы).

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

//Запретить скролл:

$(«html,body»).css(«overflow»,»hidden»);

//или только вертикальный скролл:

$(«body»).css(«overflow-y»,»hidden»);

//и на css:

position:fixed;overflow:hidden

//Запретить scroll на чистом JS можно так:

document.body.style.overflow = ‘hidden’;

//Убрать скроллинг на IPAD можно так:

document.body.addEventListener(‘touchmove’,function(event),false);

//на jQuery:

$(document).bind(‘touchmove’, false);

//P.S: Данный способ не работает на мобильных устройства, так как там используется точпад, по этому необходимо для body применять свойство position:fixed; пример:

создаем сам класс

.fixed

position:fixed; /*позицианируем чтобы исчез скролл*/

width:100%; /*что бы верстка не складывалась по ширине*/

>

//Применяем когда нам это необходимо

$(«body»).addClass(«fixed»);

//и убираем его когда нужно сновa включить прокрутку

$(«body»).removeClass(«fixed»);

Как убрать полосы прокрутки?

Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.

Решение

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

Способ основан на использовании свойства overflow , которое добавляется к селектору HTML, как показано в примере 1.

Пример 1. Страница без полос прокрутки

HTML5 CSS2.1 IE Cr Op Sa Fx

     html < overflow: hidden; >div 
Бла-бла
  

В данном примере используется значение hidden , которое «обрезает» весь контент выходящий за рамки элемента.

Также можно использовать свойство overflow-x , чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.

Пример 2. Нет горизонтальной полосы прокрутки

HTML5 CSS3 IE Cr Op Sa Fx

       
Бла-бла
  

Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.

Как стилизовать или убрать полосу прокрутки — 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 состоит различных псевдо-элементов.

1. ::-webkit-scrollbar — это фон самого скроллбара.
2. ::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
3. ::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
4. ::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.

Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.

HTML         
   

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); } 

Как убрать двойной скрол и пустое место из-за длины абс. спозиционированного меню?

Всем привет!
На данном странице из-за абсолютно спозиционированных блоков(выпадаюшее меню при наведении на пунктов меню) меню у слева наверху появляется пустое место снизу. Из-за этого появляется пустое место снизу и двойной скролл. Двойной скролл можно убрать если у html убрать правило overflow-x:hidden; Но, вот никак не пойму причину, почему абс. позиционированные блоки порождают отступ снизу? Ведь они же не в потоке?
Надеюсь кто-нибудь объяснить мне почему так происходит. Заранее спасибо.

• Вопрос задан более трёх лет назад
• 1206 просмотров

Комментировать
Решения вопроса 2

Пройдите в меню:
Лампы -> Красота и здоровье
Что Вы видите?) Правильно, нереально большой список итемов, из-за которых и все проблемы.
Очень рекомендую добавить максимальную высоту списков с overflow: auto;
Иначе, даже выбитому из потока парню надо куда-то вмещаться, чтобы его юзверь-то увидел

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

Сергей delphinpro @delphinpro Куратор тега Вёрстка
frontend developer

почему абс. позиционированные блоки порождают отступ снизу? Ведь они же не в потоке?
Надеюсь кто-нибудь объяснить мне почему так происходит.

А куда же им деться?
Причина очевидна — блок растягивает страницу настолько, чтобы вместиться в неё. И неважно, абсолютный он, или нет.

Ведь они же не в потоке?

Ну и что? Ну вынули элемент из потока, со страницы-то он никуда не делся.

—
Простое решение:
дать выпадашкам position:fixed а при ховере — absolute
Побочный эффект — скролл страницы будет проявляться только при открытом меню, если оно не вместится.
Еще простое решение (частный случай):
Для последнего уровня задать максимальную высоту и oveflow:auto
Минусы — годится только для последнего уровня, потому что его границы уже ничего не вылезет из-за overflow

Все остальные решения требуют вмешательства javascript или серьёзной переработки принципа показа подменюшек.