Как скрыть скроллбар css
Перейти к содержимому

Как скрыть скроллбар css

  • автор:

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

Именно скрыть, а не вообще убрать как это делает overflow: hidden? Т.е. мне нужно, чтобы сам скроллинг при этом был доступен, так как (только) на событие «прокрутки колесиком мыши» подвешен слайдер. Может как-то сделать его размеры 0х0, но только не hidden, это убивает слайдер.

Отслеживать
51.3k 87 87 золотых знаков 267 267 серебряных знаков 505 505 бронзовых знаков
задан 6 апр 2012 в 19:40
2,711 15 15 золотых знаков 55 55 серебряных знаков 87 87 бронзовых знаков
Размеры слайдера фиксированные?
6 апр 2012 в 21:00
резиновый, но какое это имеет значение?
6 апр 2012 в 21:12

Если спросил, значит, имеет) Можно было бы его обернуть дивом меньшего размера с overflow: hidden; , тогда полоса прокрутки была бы вне поля видимости. А так вам видимо только убирать полосу совсем и отлавливать mouseWheelUp/Down.

6 апр 2012 в 21:50

mouseWheelUp/Down и так отлавливается, парадокс в том что на телефоне работает только тогда когда эта . пардон, этот скроллбар виден, но вот некрасиво выглядит енто, на обычном компе еще как-то можно пережить, в том смысле что скрыть можно hidden’ом, а вот на телефоне «Зысь..»

Горизонтальная прокрутка CSS: определение и как убрать на всех разрешения

Lorem ipsum dolor

Главный недостаток горизонтального скролла — в веб-версиях сайтов он смотрится «не очень» , п лю с п ользователи компьютеров и ноутбуков неохотно им пользуются. Из-за этого вокруг горизонтального скролла царит облако негатива , и поисковые системы жестко определили свою позицию.

Другое дело, когда горизонтальный скролл применяется в мобильных версиях веб-ресурсов. Копаясь в телефоне, удобно скроллить определенный контент «в сторону». Однак о г оризонтальный скролл оправдывается, когда реализован в отдельных блоках для удобства пользователя. Если, опять же , скроллится вся страница веб-сайта — это плохо.

Горизонтальный скролл CSS: особенности

  1. В веб-версиях ресурса он не заметен. Если организовать горизонтальный скролл в веб-версии сайта, тогда нужно быть готовым к тому, что пользователи будут не замечать его или просто игнорировать. Поэтому, если он организован специально, не нужно размещать важную информацию таким образом.
  2. Поисковые системы к горизонтальному скроллу относятся с презрением. Пользователям десктопных устройств не нравится скроллить «в сторону». Это не удобно. Поэтому поисковые системы пошли им навстречу и не рекомендуют использовать такой вид скролла на веб-ресурсе.
  3. В мобильной версии веб-сайт а г оризонтальный скролл позволяет компактно размещать однообразную информацию в пределах определенного блока. Например , товары одной категории в интернет-магазине. Допустим , у вас есть несколько важных категорий то ва ра, которые вы хотите разместить в начале страницы. В этом случае вы размещаете категории вертикально друг под дру гом , а товар в них размещаете так , чтобы он скроллился горизонтально.
  4. Горизонтальный скролл экономит много места на небольших экранах. При этом он не сильно нагружает страницу, если сравнивать с вариантом вертикального расположения всего контента.

Как убрать горизонтальный скролл с помощью CSS

Прежде чем убрать горизонтальную прокрутку возможностями CSS , давайте выясним , из-за чего она появляется. Рассматриваем тот случай, когда горизонтальный скролл появился «случайно», а не был сделан специально.

Горизонтальная прокрутка появляется в том случае, когда какой-то элемент «выходит» за область видимости контента страницы. У начинающих верстальщиков и веб-разработчиков это довольно частое явление. Чтобы избавит ь ся от горизонтальной прокрутки , нужно «выскочивший» элемент «загнать» в область видимости или удалить. Если удалось «поправить» такой элемент, тогда хорошо. Если нет, потому что вы не можете его найти, тогда есть проверенное CSS-свойство «overflow».

Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»

  • overflow-х — свойство, отвечающее за горизонтальную прокрутку;
  • overflow-у — свойство, отвечающее за вертикальную прокрутку.

Заключение

Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».

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

Мы будем очень благодарны

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

How TO — Hide Scrollbar

Add overflow: hidden; to hide both the horizontal and vertical scrollbar.

Example

body <
overflow: hidden; /* Hide scrollbars */
>

To only hide the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x :

Example

body <
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
>

Note that overflow: hidden will also remove the functionality of the scrollbar. It is not possible to scroll inside the page.

Tip: To learn more about the overflow property, go to our CSS Overflow Tutorial or CSS overflow Property Reference.

Hide Scrollbars But Keep Functionality

To hide the scrollbars, but still be able to keep scrolling, you can use the following code:

Example

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar display: none;
>

/* Hide scrollbar for IE, Edge and Firefox */
.example -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
>

Webkit browsers, such as Chrome, Safari and Opera, supports the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser’s scrollbar. IE and Edge supports the -ms-overflow-style: property, and Firefox supports the scrollbar-width property, which allows us to hide the scrollbar, but keep functionality.

Как убрать scrollbar?

Author24 — интернет-сервис помощи студентам

Как убрать вертикальный ScrollBar в Microsoft Interner Control?
как убрать в открывающейся HTML-страничке вертикальный ScrollBar .

Убрать scrollbar в CheckedListBox
при предварительном просмотре всё отображается как надо, а при запуске получается лажа. смотреть на.

Убрать ограничение scrollbar
Столкнулся с проблемой при работе с полосой прокрутки: на максимальное положение бегунка имеется.

692 / 383 / 51
Регистрация: 22.01.2009
Сообщений: 1,135
overflow:hidden; ?
Регистрация: 01.12.2009
Сообщений: 18

ЦитатаСообщение от FunDuck Посмотреть сообщение

overflow:hidden; ?

1 2 3 4 5 6 7 8 9 10 11
div.novosti{overflow:auto; height:600px;} .layer { color:white; font-family: Geneva, Arial, Helvetica, sans-serif; overflow:auto; /* Добавляем полосы прокрутки */ width: 300px; /* Ширина блока */ height: 600px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */ border: solid 0px black; /* Параметры рамки */ }

overlfow:hidden; — обрезает текст в пределах ячейки и убирает не только scrollbar, но и саму прокрутку.

692 / 383 / 51
Регистрация: 22.01.2009
Сообщений: 1,135
Что в твоем понятии прокрутка?
Регистрация: 01.12.2009
Сообщений: 18

ЦитатаСообщение от FunDuck Посмотреть сообщение

Что в твоем понятии прокрутка?

В моём понятии «прокрутка»-это скроллинг контента в ячейке. не так?? А вообще ,в первом посте есть ссылка на ресурс,так вот справа от колонки «НОВОСТИ» имеется scrollbar. вот от него-то и охота избавиться.

692 / 383 / 51
Регистрация: 22.01.2009
Сообщений: 1,135
Можно js попробывать.
Регистрация: 01.12.2009
Сообщений: 18

ЦитатаСообщение от FunDuck Посмотреть сообщение

Можно js попробывать.
Я нуб в этом деле,мне бы готовое решение.
Регистрация: 04.10.2009
Сообщений: 86

ЦитатаСообщение от GRIF-ON Посмотреть сообщение

1 2 3 4 5 6 7 8 9 10 11
div.novosti{overflow:auto; height:600px;} .layer { color:white; font-family: Geneva, Arial, Helvetica, sans-serif; overflow:auto; /* Добавляем полосы прокрутки */ width: 300px; /* Ширина блока */ height: 600px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */ border: solid 0px black; /* Параметры рамки */ }

overlfow:hidden; — обрезает текст в пределах ячейки и убирает не только scrollbar, но и саму прокрутку.

Ну в случае если содержимое блока никогда теоритически не вылезет за предел самого блока а scroll-bar никак не допустим то лучше hidden

Совет выучи css и html 2 недели зхаймет это зато сможешь сайты верстать в блокноте и не отвлекаться на непонятные теги свойства
overflow

Регистрация: 01.12.2009
Сообщений: 18

Уважаемый FAKE , я просил ответа «КАК?» и «МОЖНО-ЛИ?» Зачем нужны эти «Ну. в случае. если. » ? Дан конкретный пример,где ,совершенно очевидно,содержимое «вылезает» за пределы блока,и тамже озвучено,что оно,содержимое,будет только увеличиваться в объёме.
По поводу совета.Как только Вы станете командиром АПРК (атомного подводного ракетного крейсера),я сразу начну учить HTML,PHP,CSS, JS и что там ещё Это я к тому,что на это просто нет времени.
Вопрос остаётся открытым: «Можно-ли убрать scrollbar в данном выше примере. «

Спасибо всем за уделённое время.

Регистрация: 04.10.2009
Сообщений: 86

1 2 3 4 5 6 7 8
.layer < color:white; font-family: Geneva, Arial, Helvetica, sans-serif; overflow:auto; /* Добавляем полосы прокрутки */ hight: 600px(УБЕРИ ЭТО СВОЙСТВО). width: 300px; /* Ширина блока */ /* Высота блока */ padding: 5px; /* Поля вокруг текста */ border: solid 0px black; /* Параметры рамки */ >

если правильно понял что ты хочешь) вот то что выделено убери из кода и глянь то что ты хотел? Или нет?

А насчет крейсера ну лано если стану позвоню)) тока учти тогда и си заодно выучишь)

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

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