| Kosten | Понедельник, 25 Июня 2018, 22:25 | Сообщение 1 |
| Иногда вы заметили, что сайт, имеет вертикальную полосу прокрутки и горизонтальную полосу прокрутки. В каком-то сценарии вы хотели бы скрыть эту вертикальную полосу прокрутки или горизонтальную полосу прокрутки. Вы можете добавить следующий CSS чтобы убедиться, что ваш сайт не имеет ни горизонтальной, ни вертикальной полосы прокрутки при просмотре в браузере.
Недавно я вижу довольно много людей, которые спрашивают, как удалить полосы прокрутки со своей страницы, как вертикальные, так и горизонтальные полосы прокрутки. Я объясню это не только для удаления полос прокрутки, но также может использоваться, чтобы заставить их появляться навсегда.
Перейдите с переполнением
CSS Overflow - это свойство, которое управляет переполнением элемента блока, переполнение содержимого вызывает создание полос прокрутки. Существует также Overflow-X и Overflow-Y, оба могут использоваться для удаления полос прокрутки, в зависимости от того, какой из них вы хотите удалить.
Во-первых, доступными значениями для этих свойств являются некоторые варианты:
Видимый: это отображает переполняющее содержимое за пределами родителей;
Скрытый: скроет переполненный контент, не переустанавливая его;
Прокрутка: применяет полосы прокрутки к элементу - переполнение или нет;
Авто: применяется горизонтальная, вертикальная или обе полосы прокрутки;
Как спрятать scrollbar в div и отставить возможность скроллинга?
HTML
Код <div id="tresamikas"> <div id="odsaxtimas"> <p>Описание</p> </div> </div>
CSS
Код div#tresamikas{
height:200px;
width:300px;
overflow:hidden;
border:1px solid black;
padding: 10px;
}
div#odsaxtimas{
height:200px;
width:326px;
overflow:auto;
}
Здесь самостоятельно задаем по описанию.
Демонстрация
Также не нужно исключать:
При помощи CSS
Код /* хром, сафари */
.element::-webkit-scrollbar { width: 0; }
/* ie 10+ */
.element { -ms-overflow-style: none; }
/* фф (свойство больше не работает, других способов тоже нет)*/
.element { overflow: -moz-scrollbars-none; }
Скрытие вертикальных полос прокрутки с помощью чистого CSS в Chrome, IE (6+), Firefox, Opera и Safar.
Провел последний день, пытаясь найти лучший способ скрыть полосы прокрутки, используя чистый CSS в последних версиях каждого браузера. Однако я хотел иметь возможность еще прокручивать элемент, поэтому нужно использовать в CSS.
Код .element { overflow: hidden; }
Итак, предварительное исследование показало следующее:
1. Существует правило CSS, которое может скрывать полосы прокрутки в браузерах на основе Webkit (Chrome и Safari).
Код .element::-webkit-scrollbar { width: 0 !important }
2. Существует правило CSS, которое может скрывать полосы прокрутки в IE 10+. Это правило:
Код .element { -ms-overflow-style: none; }
3. Раньше было правило CSS , которые могли бы скрыть полосы прокрутки в Firefox, но с тех пор он считается устаревшим.
Код .element { overflow: -moz-scrollbars-none; }
Рекомендованный StackOverflow подход состоял в том, чтобы предоставить мои элементы прокрутки, обернуть их в содержащего элемент, и сделать содержащий элемент элемента меньшим и дать ему:
По существу, вы привязываетесь к событию прокрутки для своего элемента и устанавливаете scrollLeft в 0 каждый раз, когда запускается событие прокрутки. Кажется, что это работает, но если браузер вообще отстает, он может выглядеть глючным.
Код .element:active { pointer-events: none; }
Это помешало пользователям Webkit прокручиваться вправо при нажатии и перетаскивании вправо по тексту, но также не позволяло им прокручиваться при нажатии и перетаскивании текста. Ясно, что это не было бы хорошим решением.
Если вместо того, чтобы покрывать полосы прокрутки содержащим элементом, я использовал элемент after, чтобы просто поместить белую рамку над полосой прокрутки. Казалось, это сработало, но потребовалось, чтобы знать, насколько широка полоса прокрутки. После небольшой настройки я нашел способ создать элемент, который был столь же широк, как полоса прокрутки, и покрыл существующую полосу прокрутки.
По существу, я создал элемент, который был не чем иным, как вертикальной полосой прокрутки. Положил ::after элемент на том, что покрыл его сплошным цветом. Переместить весь фрагмент существующей полосы прокрутки. Этот метод был довольно прост, но он по-прежнему оставлял желать лучшего. Что делать, если я не хочу лишнего пробела справа от моего прокручиваемого элемента.
| | Страна: (RU) |
| |
