Overflow scroll скрыть скролл – Css убрать скролл но оставить прокрутку. Как убрать полосы прокрутки. Скрыть полосу прокрутки, но при этом все еще можно прокручивать

Содержание

Как скрыть полосы прокрутки при помощи CSS?

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

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

Убрать полосы прокрутки со страницы при помощи CSS

Метод основан на использовании CSS свойства overflow, которое определяет, как будет отображаться содержимое блочной структуры, если оно (содержимое) превышает размеры родительского элемента.

Из всех возможных значений данного свойства нас интересует значение «hidden»:

которое задает браузеру инструкцию «отобразить поместившийся контент, что не влезло – скрыть»

Применив это свойство к селектору body или html можно добиться исчезновения полос прокрутки.

Рассмотрим пример:

HTML:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title> Убираем скролл </title>
  </head> 
<body> 
      <div></div>
</body>
</html>

CSS:

Как видим, у нас есть девственно-чистая страница высотой 2800px с полосой вертикального скролла. Теперь добавим в каскадную таблицу стилей строчку:

html { overflow:  hidden; }

и обновим страничку.

Также можно применять свойства overflow-y (overflow-x) для управления отображением не вместившегося контента только по вертикали (горизонтали). Т.е., исходя из рассматриваемого контекста, можно скрыть только вертикальную (горизонтальную) полосу прокрутки.

Важно!!!

  1. CSS не скрывает полосы прокрутки, а всего лишь создает браузеру условия, при которых нет необходимости их выводить. Это значит, что вместе с скролл-барами у вас пропадет и скролл-функция, и «не вмещающийся контент» будет недоступен для просмотра!
  2. Перед использованием данного приема, хорошо подумайте – нужен ли вам он вообще. Ведь маленький недочет и можно потерять полезную информацию из поля зрения.
  3. Наиболее оправданным будет применение overflow: hidden в следующих случаях:
    • Вывод маленькой страницы, которая априори поместится полностью на экране (например, страницы ошибки, страницы авторизации и т.д. ).
    • Вывод небольших web-форм
    • Скрытие полос прокрутки при создании собственного каcтомного скролл-бара.

Послесловие

Чаще всего к этой теме web-мастера приходят тогда, когда яркий авторский дизайн сайта сходит на ноль из-за «приевшегося» стандартного вида системного скролл-бара. Да, бывает и такое. В таком случае, существует несколько вариантов решения проблемы:

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

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

Преимущества:

  • Системный скролл гораздо производительнее JavaScript-симуляторов, реализует все «фишки» операционной системы устройства, сохраняется кросс-платформенность.

Недостатки:

  • Нет никаких гарантий, что браузеры на других (не webkit) движках смогут осознать всю «тонкость душевной организации» вашего сайта (кастомизация скорее всего не произойдет).

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

Дело в том, что в этом случае JavaScript приходится обрабатывать системные события связанные со скроллом. А интерфейс этих событий значительно отличается для каждого браузера, не говоря уже о разных платформах. Учтите эту информацию при использовании «готовых» j-скроллеров (особенно, когда на странице источника заявляют о полной «кросс» без подтверждения).

Преимущества

  • Безграничная по глубине кастомизация.

Недостатки

  • Производительность эмулятора ниже производительности системной прокрутки.
  • Нет гарантий кросс-браузерности и кросс-платформности.

Тема авторского универсального скролла будет более подробно рассмотрена в отдельной статье. Успешных Вам проектов!!!

Оценок: 13 (средняя 4 из 5)

  • 22170 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Css убрать скролл но оставить прокрутку. Как убрать полосы прокрутки. Скрыть полосу прокрутки, но при этом все еще можно прокручивать

На Земле живет свыше шести миллиардов людей. Банально! Знать всех невозможно, и это тоже банальность. Однако "Мой круг" пытается опровергнуть приведенное утверждение и выдвигает тезис, что максимальная длина цепочки для знакомства двух любых людей на Земле составляет шесть рукопожатий. Итак, главная задача "Моего круга", как ее видят создатели, — это создание социальной сети, в которой люди могут общаться по хобби, профессиональным интересам, образованию, общему прошлому. Такой широкий круг возможных интересов привлекает большое количество пользователей, дает им возможность разнообразного поиска знакомых, партнеров, работодателей и работников, просто любителей поболтать в Сети. С другой стороны, такой разброс тематических направлений делает ресурс слишком объемным, недостаточно удобным в использовании и эклектичным в сравнении, например, с LinkedIn , который ориентирован на бизнес и карьеру.

"Мой круг" построен по хорошо известному принципу, когда личные знакомые составляют первый круг участника, знакомые знакомых — второй. Самый дальний из доступных кругов — третий. Следуя утверждению организаторов ресурса о шести рукопожатиях, придется последовательно знакомиться с людьми второго, затем третьего круга, и далее до шестого. Человек на шестом рукопожатии теоретически может быть любым человеком в мире. Для регистрации достаточно указать свои имя, фамилию и электронный адрес. Можно зарегистрироваться самому, а можно получить приглашение от действующего участника. В принципе можно этими сведениями и ограничиться. Однако, если вы захотите, чтобы вас на самом деле можно было найти для общения, новой работы, обсуждения интересных тем, стоит заполнить свой профиль, содержащий довольно обширный набор сведений. В нем можно указать:

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

Действия пользователя полностью логируются. Так что можно не вспоминать, посылал ли ты уже приглашение в свой круг или ответ на какую-нибудь тему. Достаточно войти в "Журнал действий", чтобы просмотреть архив своих активностей. Для особо активных пользователей сам архив разделен на закладки "Все", "Приглашения", "Вакансии" и "Другое". На последней закладке отображаются "наиболее значимые действия пользователя". Однако что к ним относится, не объясняется. Наверное, это знают старые опытные пользователи, которые уже совершили "значимые действия".

Какие круги могут стать моими

Сервис "Мой круг" многогранен. Его круги расположены в разных плоскостях. Есть круги профессиональные. Пользователь выбирает интересующие его тематики и становится доступен для коллег. И наоборот, перейдя в раздел по своему направлению, можно просмотреть, кто же еще находится в круге ваших профессиональных интересов. По каждому профессиональному кругу поддерживается свой форум. Однако краткий обзор даже наиболее популярных разделов показывает, что интенсивность обмена сообщениями в форуме небольшая. Так, на верхних строчках зачастую показаны сообщения вчерашние и даже двухдневной давности. Такая неторопливость отчасти компенсируется их содержательностью. В отличие от многих сетевых ресурсов здесь почти не встретишь ругани, бессмысленного выпячивания своего мнения и прочих малоприятных признаков участия в форуме "ради самого процесса". Очень интересная дизайнерская находка — зависимость размера шрифта темы от ее популярности. Например, самый популярный раздел "Музыка" отображается шрифтом 20 кеглей. Следующие по популярности — "Програм

Как убрать полосу прокрутки в любом браузере [+ВИДЕО]

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

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

Оглавление:

Скрываем полосу прокрутки в популярных браузерах

Ниже расскажу и покажу, как убрать полосу прокрутки в любом браузере. При этом, в одном обозревательном движке это дело скроется совсем, а в другом (самом популярном), невзрачная и ворующая полезное пространство полоска с ползунком научится интеллектуально, когда надо, уменьшаться или увеличиваться в размерах, а также, исчезать полностью.

полоса прокрутки в браузереполоса прокрутки в браузере

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

Как убрать полосу прокрутки в Mozilla Firefox

Данный способ применим к абсолютно всем клонам этого, когда-то очень популярного и удобного обозревателя сети. К сожалению, скрытие полосы прокрутки в нём возможно только с помощью дополнений и исключительно полностью (если ошибаюсь — поправьте меня в комментариях).

Идём в дополнения Mozilla Firefox…

дополнения Mozilla Firefoxдополнения Mozilla Firefox

…и в поисковую строку открывшейся страницы…


driverhubdriverhubЧитайте также на сайте:
operaoperaпоиск дополнений Mozilla Firefox
поиск дополнений Mozilla Firefox

…вбиваем (копи-пастим со строки ниже) название дополнения для скрытия вертикальной полосы прокрутки в Mozilla Firefox…

hide-scrollbars

дополнение скрытия скроллбара в Mozilla Firefoxдополнение скрытия скроллбара в Mozilla Firefox

Тыкаем «Enter» на любимой клавиатуре и получаем результат поиска в фирменном магазине дополнений…

дополнения для скрытия полосы прокрутки в Mozilla Firefoxдополнения для скрытия полосы прокрутки в Mozilla Firefox

Как видите, наша цель на первом месте, но дополнение «Scrolantana» абсолютно идентично «hide-scrollbars» — точно также полностью убирает полосу прокрутки с наших глаз. Каким воспользоваться — решайте сами (устанавливал их оба, но почему-то остановился на первом, как и 1279 пользователей).

Теперь в Вашем браузере Mozilla Firefox (и во всех его клонах) совсем нет вертикальной полосы прокрутки справа и рабочее пространство на капельку увеличилось (мелочь, а приятно)…

Без скроллбара и с нимБез скроллбара и с ним

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

Как убрать полосу прокрутки в Google Chrome

Гораздо интереснее получается история с полосой прокрутки в самом популярном и производительном (на данный момент времени) браузере — каких-либо расширений или плагинов для скрытия этого дела не нужно в нём задействовать.

Более того, ползунок скроллбара в Хроме не просто скрывается на постоянной основе, как у менее продвинутого коллеги, а приобретает вид тонкой и стильной полоски при движении страницы, которая расширяется при наведении курсора на неё. Полностью исчезает полоса прокрутки в Google Chrome лишь при остановке страницы в одном положении.

Не знаю, поняли моё описание выше или нет, но точно Вам понравится современный и практичный вид обновлённого с помощью встроенной скрытой функции древнего элемента интерфейса. Это из разряда «словами не передать — надо видеть».

Все подражатели (клоны), которым не счесть числа, обозревателя от корпорации Google (точнее, которые на одном с ним движке работают) имеют встроенную возможность (экспериментальную функцию) для изменения вида самой идеологии многократно упомянутой выше полоски, что справа живёт в окне браузера.

Всё очень легко и просто — печатаем адрес в (омнибокс) адресную строку (копируем и вставляем из строки ниже)…

chrome://flags/

…и тыкаем «Enter» на клавиатуре — попадаем в секретный раздел браузера Google Chrome, в котором нужно воспользоваться поисковой строкой…

поисковая строкапоисковая строка

Прописываем в неё (копируем и вставляем из строки ниже) такой параметр…

Overlay Scrollbars

…и сразу (без тыканья кнопок на клавиатуре) получаем результат…

функции скролла в Google Chromeфункции скролла в Google Chrome

Активируем первый пункт…

экспериментальный скроллбар в Хромеэкспериментальный скроллбар в Хроме

…и применяем изменения (перезапускаем обозреватель)…

применяем изменения в Google Chromeприменяем изменения в Google Chrome

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

Как писал выше — почитатели и пользователи обозревателей Opera и Яндекс.Браузера точно таким же методом могут осовременить свою полосу прокрутки.

Что касается самого распространённого… средства для скачивания нормальных браузеров под названием Microsoft Edge, то вполне ожидаемо скрыть или вообще, что-либо сделать с данным элементом интерфейса в нём невозможно (может ситуация изменится с официальным выходом в свет версии программы на базе Chromium).

Краткий итог

  1. В своём стандартном виде полоса прокрутки в любом браузере имеет печальный старинный вид и требует скрытия (модификации).
  2. Убрать полосу прокрутки в Mozilla Firefox полностью можно с помощью дополнений «hide-scrollbars» или «Scrolantana».
  3. Модифицировать и заметно осовременить скроллбар в Google Chrome можно с помощью экспериментальной функции «Overlay Scrollbars».
  4. Microsoft Edge в топку!

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

ПОЛЕЗНОЕ ВИДЕО

Рекомендую ещё посмотреть обзоры...

Я только обозреваю программы! Любые претензии - к их производителям!

Ссылки в комментариях публикуются после модерации.

^Наверх^

Как скрыть конкретную полосу прокрутки? [Дубликат]

Если вы хотите, чтобы прокрутка работала, перед тем, как скрывать полосы прокрутки, подумайте о том, чтобы имитировать их. Современные версии OS X и мобильных ОС имеют полосы прокрутки, которые, хотя и непрактичны для захвата мышью, довольно красивы и нейтральны.

Чтобы скрыть полосы прокрутки, используется метод Джона Курлака за исключением того, что пользователи Firefox, у которых нет сенсорных панелей, не имеют возможности прокручивать, если у них нет мыши с колесом, что они, вероятно, делают, но даже тогда они обычно могут прокручивать только вертикально.

Техника Джона использует три элемента:

  • Внешний элемент для маскировки полос прокрутки.
  • Средний элемент для полос прокрутки.
  • И элемент содержимого для обоих установите размер среднего элемента и сделайте его полосками прокрутки.

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

Моя самая большая проблема заключается в том, устанавливают ли все версии браузеров полосы прокрутки для отображения видимого переполненного содержимого v isible. Я тестировал в текущих браузерах, но не старше.

Простите мой SASS ; P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

Тестирование

ОС X равно 10.6.8. Windows - Windows 7.

  • Firefox 32.0 Скрытые полосы скрыты. Клавиши со стрелками не прокручиваются, даже после нажатия на фокусировку, но колесико мыши и два пальца на трекпаде. OS X и Windows.
  • Chrome 37.0 Скроллинг скрыт. Клавиши со стрелками работают после нажатия на фокус. Работа колесика мыши и трекпада. OS X и Windows.
  • Скрытые полосы браузера Internet Explorer 11. Клавиши со стрелками работают после нажатия на фокус. Колесо мыши работает. Windows.
  • Safari 5.1.10 Скроллинг скрыт. Клавиши со стрелками работают после нажатия на фокус. Работа колесика мыши и трекпада. OS X.
  • Android 4.4.4 и 4.1.2. Полосы прокрутки скрыты. Нажмите прокрутку. Пробовал в Chrome 37.0, Firefox 32.0 и HTMLViewer в 4.4.4 (что бы это ни было). В HTMLViewer страница представляет собой размер маскированного контента и может также прокручиваться! Скроллинг взаимодействует с масштабированием страницы.

ответ дан Seth W. Klein 21 August 2018 в 19:28

Как убрать полосы прокрутки? | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

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

Решение

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

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

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

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Полосы прокрутки</title>
  <style>
   html { overflow:  hidden; }
   div { height:  2000px; }
  </style>
 </head>
 <body>
  <div>Бла-бла</div>
 </body>
</html>

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

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

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

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Полосы прокрутки</title>
  <style>
   html { overflow-x: hidden; }
   div { 
    min-width:  800px; /* Минимальная  ширина */
    background: #fc0;  /* Цвет фона */
    padding: 10px;  /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div>Бла-бла</div>
 </body>
</html>

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

Как убрать полосу прокрутки с помощью CSS

Если у вас возникла необходимость убрать полосу прокрутки на сайте, есть легкий способ это реализовать с помощью CSS свойства.
В этой статье я расскажу, как на сайте убрать горизонтальную и вертикальную полосу прокрутки.

Как убрать горизонтальную полосу прокрутки

Итак, допустим, вы имеете вот такой сайт, где есть горизонтальная полоса прокрутки и вертикальная

Как убрать горизонтальную полосу прокрутки

Но вам необходимо убрать только горизонтальную полосу прокрутки.

Как убрать горизонтальную полосу прокрутки

Для этого открывайте свой файл со CSS стилями и добавляйте свойство  overflow-x к селектору «html» или к «body»

html{ overflow-x:hidden; }

или

body{ overflow-x:hidden; }

Результат:

Как убрать горизонтальную полосу прокрутки

Как убрать вертикальную полосу прокрутки

Допустим, вам уже необходимо убрать только вертикальную полосу прокрутки.

Как убрать вертикальную полосу прокрутки

Для этого открывайте свой файл с CSS стилями и добавляйте свойство  overflow-y к селектору «html» или к «body»

html{ overflow-y:  hidden; }

или

body{ overflow-y:  hidden; }

Результат:

Как убрать вертикальную полосу прокрутки

Как убрать горизонтальную и вертикальную полосу прокрутки

Допустим, вам необходимо убрать вертикальную и горизонтальную полосу прокрутки.

Как убрать горизонтальную и вертикальную полосу прокрутки

Для этого открывайте свой файл с CSS стилями и добавьте свойство  overflow к селектору «html» или к «body»

html{ overflow:  hidden; }

или

body{ overflow:hidden; }

или же добавьте свойство  overflow-x и overflow-y к селектору «html» или к «body»:

html{
overflow-x:  hidden;
overflow-y:  hidden;
}

или

body{
overflow-x:  hidden;
overflow-y:  hidden;
}

Результат:

Как убрать горизонтальную и вертикальную полосу прокрутки

Как и обещал – ничего сложно здесь не было.
Внимание, прежде чем убирать полосу прокрутки, подумайте, действительно ли вам это нужно.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: css, для сайта

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

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