Я хочу иметь возможность прокручивать всю страницу, но без отображения полосы прокрутки.
В Google Chrome она есть:
::-webkit-scrollbar {
display: none;
}
Но Mozilla Firefox и Internet Explorer, похоже, так не работают.
Я также попробовал это в CSS:
overflow: hidden;
Это скрывает полосу прокрутки, но я не могу больше прокручивать.
Есть ли способ убрать полосу прокрутки, сохранив при этом возможность прокручивать всю страницу?
Только с помощью CSS или HTML, пожалуйста.
Просто тест, который работает нормально.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
[Рабочая скрипка][1].
Поскольку ширина полосы прокрутки отличается в разных браузерах, лучше обрабатывать ее с помощью JavaScript. Если вы сделаете Element.offsetWidth - Element.clientWidth
, то появится точная ширина полосы прокрутки.
[JavaScript Working Fiddle][2].
Использование Position: absolute
,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
[Рабочая скрипка][3].
[Рабочая скрипка на JavaScript][4]
Основываясь на этом ответе, я создал простой плагин прокрутки.
Он прост в WebKit, с возможностью стилизации:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
Это работает для меня простые свойства CSS:
.container {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
Для более старых версий Firefox, используйте: переполнение: -МОЗ-прокрутки-нет;
Обновление:
Firefox теперь поддерживает скрытие полосы прокрутки с помощью CSS, так что все основные браузеры под (хром, Firefox и Internet&ампер;усилитель; nbsp;Эксплорер, сафари и т. д.).
Просто примените следующий CSS для элемента, который вы хотите удалить полосы прокрутки с:
Лан-УСБ .контейнер { переполнение-по Y: прокрутки; скроллбара-ширина: отсутствует; /* для Firefox */ -МС-перелив-стиль: нет; /* Интернет Эксплорер 10+ */ } .контейнер::-в WebKit-прокрутки { /* в WebKit */ ширина: 0; высота: 0; }
Это наименее решение кросс-браузер суховато, что я'm В настоящее время известны. [Проверить демо.](
)ОРИГИНАЛЬНЫЙ ОТВЕТ:
Здесь'с другим способом, который еще'т были указаны. Это's действительно простой и включает в себя только двух дивов и CSS. Нет JavaScript или проприетарные CSS это нужно, и это работает во всех браузерах. Это не'т явно требуется настройка ширины контейнера либо, тем самым делая ее жидкой.
Этот метод использует отрицательное поле, чтобы переместить полосу прокрутки из родителей, а затем такое же количество набивки, чтобы протолкнуть содержимое обратно в исходное положение. Техника работает для вертикальных, горизонтальных и два способа прокрутки.
Демос:
Пример кода для вертикальной версии:
HTML-код:
Лэнг в формате HTML <класс деление=и"родитель" и> <див класс="от детей" и> Ваш контент. </див> </див>
Усс:
``Лан-УСБ .родитель { ширина: 400 пикселей; высота: 200px; граница: 1px твердых #ААА; переполнение: скрытый; }
.ребенок { высота: 100%; маржа-право: -в 50px; / максимальная ширина скроллбара / обивка-право: в 50px; / максимальная ширина скроллбара / переполнение-по Y: прокрутки; } ``
Используйте:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
Это трюк для некоторого перекрытия полосы прокрутки с перекрывающимся div, который не имеет полос прокрутки:
::-webkit-scrollbar {
display: none;
}
Это только для браузеров WebKit... Или вы можете использовать специфический для браузера CSS-контент (если таковой появится в будущем). У каждого браузера может быть свое специфическое свойство для соответствующих баров.
Для Microsoft Edge используйте: -ms-overflow-style: -ms-autohiding-scrollbar;
или -ms-overflow-style: none;
как согласно MSDN.
Аналогов для Firefox не существует. Хотя существует плагин jQuery для достижения этой цели, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
Этот ответ Не'т включать код, так вот решение от страницы:
Согласно странице такой подход не'т нужно знать ширину полосы прокрутки впереди времени для работы и решения работает на всех браузерах, и можно увидеть на <а href="и
" и GT;здесь</а>.Хорошая вещь заключается в том, что вы не вынуждены использовать прокладки или разница в ширине, чтобы скрыть полосы прокрутки.
Это также увеличения безопасности. Прокладка/ширина растворов показывать полосы прокрутки, когда приблизился к минимуму.
Исправление для Firefox: http://jsbin.com/mugiqoveko/1/edit?output
в
.element,
.outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
display: none;
}
<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
</div>
</div>
</div>
в
Следующие работал для меня в Microsoft, Chrome и Mozilla для конкретного элемента div:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
HTML-код:
<div class="parent">
<div class="child">
</div>
</div>
Усс:
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
.child {
height: 150px;
width: 318px;
overflow-y: scroll;
}
Применяются соответственно для CSS.
Проверьте это [здесь](
) (протестировано в Internet&ампер;усилитель; nbsp;Explorer и Firefox).Использование:
``Лан-УСБ subparent #{ переполнение: скрытый; ширина: 500 пикселей; границы: 1 пиксель формате RGBA(0, 0, 0, 1.00) твердые; }
родитель #{ ширина: 515px; высота: 300 пикселей; переполнение-й: авто; переполнение-х: скрытый; светонепроницаемость: 10%; }
ширина: 511px; фонового цвета: RGBA(123, 8, 10, 0.42); } ``
Лэнг в формате HTML <тело> <див ИД="и subparent" и> <див ИД=и"родитель" и> <див ИД="от детей" и> <!- Вот код для прокрутки -и GT; </див> </див> </див> </тело>
По состоянию на 11 декабря 2018 (для Firefox 64 и выше), ответ на этот вопрос очень простой, как Firefox 64+ сейчас реализует CSS для прокрутки оформление спецификаций.
Просто используйте следующий CSS-код:
scrollbar-width: none;
Браузер Firefox 64-релиз Примечание ссылка здесь.
Использовать
function reloadScrollBars() {
document.documentElement.style.overflow = 'auto'; // Firefox, Chrome
document.body.scroll = "yes"; // Internet Explorer only
}
function unloadScrollBars() {
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // Internet Explorer only
}
Вызывать эти функции для любой точки вы хотите, чтобы загрузить или выгрузить или перегрузить полосы прокрутки. Это еще с прокруткой в Chrome, как я испытал это в Chrome, но я не уверен в других браузерах.
Моя проблема: я не'т хотим, любой стиль в моей HTML-содержимого. Я хочу, чтобы мое тело напрямую прокрутки без прокрутки, и только вертикальная прокрутка, работа с CSS в сети для любого размера экрана.
В коробка-калибровка влияние стоимости обивка или маржи решения, они работает с коробка-размеров:содержание коробка.
Я все еще нуждаюсь в "-МОЗ-полосы прокрутки-нет" и директива, и как gdoron и Mr_Green, мне пришлось скрыть полосы прокрутки. Я попробовал -МОЗ-преобразования
и -МОЗ-обивка-старт
, чтобы воздействие только в Firefox, но там был отзывчивый побочных эффектов, что нужно слишком много работать.
Это решение работает для HTML-содержимое тела с "дисплей: сетки" и стиль, и это является гибкой.
/* Hide HTML and body scroll bar in CSS grid context */
html, body {
position: static; /* Or relative or fixed ... */
box-sizing: content-box; /* Important for hidding scrollbar */
display: grid; /* For CSS grid */
/* Full screen */
width: 100vw;
min-width: 100vw;
max-width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
}
html {
-ms-overflow-style: none; /* Internet Explorer 10+ */
overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}
/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none; /* Might be enough */
background: transparent;
visibility: hidden;
width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
/* Make HTML with overflow hidden */
html {
overflow: hidden;
}
/* Make body max height auto */
/* Set right scroll bar out the screen */
body {
/* Enable scrolling content */
max-height: auto;
/* 100vw +15px: trick to set the scroll bar out the screen */
width: calc(100vw + 15px);
min-width: calc(100vw + 15px);
max-width: calc(100vw + 15px);
/* Set back the content inside the screen */
padding-right: 15px;
}
}
body {
/* Allow vertical scroll */
overflow-y: scroll;
}
Это работает для меня:
scroll-content {
overflow-x: hidden;
overflow-y: scroll;
}
scroll-content::-webkit-scrollbar {
width: 0;
}
Это работает для меня кросс-браузер. Однако, это не'т скрыть родной полосы прокрутки на мобильных браузерах.
в CSS .скрыть-родной-прокрутки { скроллбара-ширина: отсутствует; /* для Firefox 64 */ -МС-перелив-стиль: нет; /* Интернет Эксплорер 11 */ &ампер;::-в WebKit-прокрутки { /** в WebKit */ дисплей: нет; } }
В современных браузерах, вы можете использовать событие колеса
:
// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
const step = 100; // How many pixels to scroll
if (e.deltaY > 0) // Scroll down
content.scrollTop += step;
else // Scroll up
content.scrollTop -= step;
});
Это, как я делаю это для горизонтальной прокрутки; только CSS и хорошо работает с фреймворками типа загрузки / коль-*. Он должен только две дополнительные див и родителей с ширина
или `Max-ширина, установил:
Вы можете выбрать текст, чтобы сделать его прокрутки или прокрутить его пальцем если у вас сенсорный экран.
в
.overflow-x-scroll-no-scrollbar {
overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
overflow-x: hidden;
margin-bottom: -17px;
overflow-y: hidden;
width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x: auto;
width: 100%;
padding-bottom: 17px;
white-space: nowrap;
cursor: pointer
}
/* The following classes are only here to make the example looks nicer */
.row {
width: 100%
}
.col-xs-4 {
width: 33%;
float: left
}
.col-xs-3 {
width:25%;
float:left
}
.bg-gray {
background-color: #DDDDDD
}
.bg-orange {
background-color:#FF9966
}
.bg-blue {
background-color: #6699FF
}
.bg-orange-light{
background-color: #FFAA88
}
.bg-blue-light{
background-color: #88AAFF
}
<html><body>
<div class="row">
<div class="col-xs-4 bg-orange">Column 1</div>
<div class="col-xs-3 bg-gray">Column 2</div>
<div class="col-xs-4 bg-blue">Column 3</div>
</div>
<div class="row">
<div class="col-xs-4 bg-orange-light">Content 1</div>
<div class="col-xs-3 overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
<div class="col-xs-4 bg-blue-light">Content 3</div>
</div>
</body></html>
в
Краткая версия для ленивых людей:
в
.overflow-x-scroll-no-scrollbar {
overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
overflow-x: hidden;
margin-bottom: -17px;
overflow-y: hidden;
width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x: auto;
width: 100%;
padding-bottom: 17px;
white-space: nowrap;
cursor:pointer
}
/* The following classes are only here to make the example looks nicer */
.parent-style {
width: 100px;
background-color: #FF9966
}
<div class="parent-style overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
в
Добавление отступов к внутреннему див
, так как в настоящее время принято отвечать, выиграл'т работу, если по какой-то причине вы хотите использовать коробка-модель: границы-коробка
.
Что работает в обоих случаях увеличивается ширина внутренней див
до 100% плюс полоса прокрутки's; ширина (предполагая, что `переполнения: скрытые на внешний див).
Например, в CSS:
.container2 {
width: calc(100% + 19px);
}
В JavaScript, кросс-браузер:
var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
Это решение divitis-эска, которая тем не менее должна работать на всех браузерах...
Разметка такова и должна быть внутри что-то с относительным позиционированием (и его ширина должны быть установлены, например, 400 пикселей):
``Лэнг в формате HTML <див класс="и скрыть полосу прокрутки и"> <див класс=то"прокрутка" и> <див класс="по полосе прокрутки-внутренний" и>
</див> </див> </див> ``
Код CSS:
``Лан-УСБ .скрыть полосы прокрутки { переполнение: скрытый; позицию: абсолютная; топ: 0; слева: 0; справа: 0; дно: 0; }
.скроллбара { переполнение-по Y: прокрутки; позицию: абсолютная; топ: 0; слева: 0; права: -в 50px; дно: 0; }
.скроллбара-внутренний { ширина: 400 пикселей; } ``
Это будет в организме:
<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>
</div>
</див>
И это в CSS:
#maincontainer
{
background: grey;
width: 101%;
height: 101%;
overflow: auto;
position: fixed;
}
#child
{
background: white;
height:500px;
}