Скрыть полосу прокрутки, но все еще в состоянии прокрутки
Я хочу иметь возможность прокручивать всю страницу, но без показа полосы прокрутки.
В Google Chrome это:
::-webkit-scrollbar {
display: none;
}
Но Mozilla Firefox и Internet Explorer, похоже, не работают так.
Я также попробовал это в CSS:
overflow: hidden;
Это скрывает полосу прокрутки, но я не могу больше прокручивать.
Можно ли как-нибудь убрать полосу прокрутки, но при этом можно прокрутить всю страницу? Только с CSS или HTML, пожалуйста.
45 ответов
Просто тест, который работает нормально.
#parent{
height: 100%;
width: 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 */
}
JavaScript:
Поскольку ширина полосы прокрутки отличается в разных браузерах, лучше обрабатывать ее с помощью JavaScript. Если вы делаете Element.offsetWidth - Element.clientWidth, появится точная ширина полосы прокрутки.
или же
С помощью Position: absolute,
#parent{
height: 100%;
width: 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;
}
Информация:
Основываясь на этом ответе, я создал простой плагин прокрутки. Надеюсь, это кому-нибудь поможет.
Это работает для меня:
.container {
-ms-overflow-style: none; // IE 10+
overflow: -moz-scrollbars-none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
Примечание. В последних версиях Firefox -moz-scrollbars-none собственность устарела ( ссылка).
Легко в 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;
}
Вот еще один способ, который еще не был упомянут. Это действительно просто и включает в себя только два div и CSS. Не требуется JavaScript или собственный CSS, и он работает во всех браузерах. Это не требует явной установки ширины контейнера, что делает его жидким.
Этот метод использует отрицательное поле, чтобы переместить полосу прокрутки из родительского элемента, а затем то же количество отступов, чтобы вернуть содержимое в исходное положение. Техника работает для вертикальной, горизонтальной и двусторонней прокрутки.
Демонстрации:
Пример кода для вертикальной версии:
HTML:
<div class="parent">
<div class="child">
Your content.
</div>
</div>
CSS:
.parent{
width: 400px;
height: 200px;
border: 1px solid #aaa;
overflow: hidden;
}
.child{
height: 100%;
margin-right: -50px; /* maximum width of scrollbar */
padding-right: 50px; /* maximum width of scrollbar */
overflow-y: scroll;
}
<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.
Для FF нет эквивалента Хотя есть плагин JQuery для этого http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
Кроме того, прокрутка без полосы прокрутки для всех браузеров.
CSS
.keep-scrolling {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Add the ability to scroll y axis*/
}
/* Hide scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.keep-scrolling {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
SCSS
.keep-scrolling {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Add the ability to scroll y axis*/
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
display: none;
}
}
HTML
<div class="keep-scrolling">
</div>
Используйте это, чтобы скрыть полосу прокрутки, но сохранить функциональность:
.example::-webkit-scrollbar {
display: none;
}
Скрыть полосу прокрутки для IE, Edge и Firefox
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Этот ответ не включает в себя код, поэтому вот решение со страницы:
Согласно странице, этот подход не должен знать ширину полосы прокрутки заранее, чтобы работать, и решение работает также для всех браузеров, и его можно увидеть здесь.
Хорошо, что вы не обязаны использовать отступы или разницу в ширине, чтобы скрыть полосу прокрутки.
Это также масштабирование безопасно. Решения с отступом / шириной показывают полосу прокрутки при увеличении до минимума.
Исправление FF: 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>Просто используйте следующие 3 строки, и ваша проблема будет решена:
#liaddshapes::-webkit-scrollbar {
width: 0 !important;
}
Где liaddshape - это имя div, куда приходит scrool.
Это работает для меня кросс-браузер, однако, это не скрывает собственные полосы прокрутки в мобильных браузерах
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* IE 11 */
&::-webkit-scrollbar { /** Webkit */
display: none;
}
}
Просто напишите этот код:
::-webkit-scrollbar {
width: 0px;
}
или
::-webkit-scrollbar {
display: none;
}
Это сработало для меня
div {
-ms-overflow-style: none; /* Edge, Internet Explorer */
scrollbar-width: none; /* Firefox */
overflow-y: scroll;
}
// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
Следующее работало для меня на Microsoft, Chrome и Mozilla для определенного элемента div:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
.className::-webkit-scrollbar{
display: none;
}
Все, что вы написали, правильно, кроме «переполнения».webkit для Chrome и других браузеров
overflow-y: scroll;
или
overflow-y: auto;
Для Firefox и Edge
scrollbar-width: none;
или
scrollbar-width: thin;
Следующий стиль SASS должен сделать вашу полосу прокрутки прозрачной в большинстве браузеров (Firefox не поддерживается):
.hide-scrollbar {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
&::-webkit-scrollbar {
width: 1px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
}
Чтобы скрыть полосы прокрутки для элементов с переполненным содержимым, используйте.
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}
По состоянию на 11 декабря 2018 года (Firefox 64 и выше) ответ на этот вопрос действительно очень прост, так как Firefox 64+ теперь реализует спецификацию CSS Scrollbar Styling.
Просто используйте следующий CSS:
scrollbar-width: none;
Ссылка на выпуск Firefox 64 здесь.
HTML:
<div class="parent">
<div class="child">
</div>
</div>
CSS:
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
.child {
height: 150px;
width: 318px;
overflow-y: scroll;
}
Примените CSS соответственно.
Проверьте это здесь(проверено в IE и FF).
В современных браузерах вы можете использовать wheel event https://developer.mozilla.org/en-US/docs/Web/Events/wheel
// content is the element you want to apply the wheel scroll effect
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;
});
#subparant{
overflow:hidden;
width: 500px;
border: 1px rgba(0,0,0,1.00) solid;
}
#parent{
width: 515px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
opacity:10%;
}
#child{
width:511px;
background-color:rgba(123,8,10,0.42);
}
<body>
<div id="subparant">
<div id="parent">
<div id="child">
<!- code here for scroll ->
</div>
</div>
</div>
</body>
function reloadScrollBars() {
document.documentElement.style.overflow = 'auto'; // firefox, chrome
document.body.scroll = "yes"; // ie only
}
function unloadScrollBars() {
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
}
Вызовите эти функции для любой точки, которую вы хотите загрузить, выгрузить или перезагрузить полосы прокрутки. Все еще можно прокручивать в Chrome, как я тестировал в Chrome. Не уверен в других браузерах.
Это работает для меня:
scroll-content {
overflow-x: hidden;
overflow-y: scroll;
}
scroll-content::-webkit-scrollbar{
width: 0;
}
.your-overflow-scroll-class::-webkit-scrollbar {
...
width: 0.5rem; //only hide the vertical scrollbar
height: 0px; //only hide the horizontal scrollbar
}
Вот как я это делаю для горизонтальной прокрутки, только CSS и хорошо работает с такими фреймворками, как bootstrap / col-*. Требуются только 2 дополнительных div и родитель с установленной шириной или максимальной шириной:
Вы можете выбрать текст для прокрутки или прокрутки пальцами, если у вас есть сенсорный экран.
.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>Моя проблема: мне не нужен стиль в моем html, я хочу, чтобы мое тело было прокручиваемым без какой-либо полосы прокрутки, и только вертикальная прокрутка, работающая с css-сетками для любого размера экрана.
Решения для определения размера и размера полей, они работают с box-sizing: content-box.
Мне по-прежнему нужна директива "-moz-scrollbars-none", и, как и gdoron и Mr_Green, мне приходилось скрывать полосу прокрутки. Я пробовал -moz-transform и -moz-padding-start, чтобы воздействовать только на Firefox, но были побочные эффекты, которые требовали много работы.
Это решение работает для содержимого тела html со стилем "display: grid" и является адаптивным.
/* 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; /* IE 10+ */
overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
display: none; /* might be enought */
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;
}
Это будет на теле:
<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>
и это CSS
#maincontainer
{
background:grey ;
width:101%;
height:101%;
overflow:auto;
position:fixed;
}
#child
{
background: white;
height:500px;
}
Добавление отступов к внутреннему div, как в принятом в настоящее время ответе, не будет работать, если по какой-то причине вы хотите использовать box-model: border-box,
Что работает в обоих случаях, так это увеличение ширины внутреннего div до 100% плюс ширина полосы прокрутки (при условии overflow: hidden на внешнем div).
Например, в 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 + ')';
Вы можете использовать код ниже, чтобы скрыть прокрутку, но все еще в состоянии прокручивать
.element::-webkit-scrollbar { width: 0 !important }
Я просто хотел поделиться комбинированным фрагментом для скрытия полосы прокрутки, которую я использую при разработке. Это коллекция из нескольких фрагментов, найденных в интернете, которая работает для меня:
.container {
overflow-x: scroll; /* for horiz. scroll, otherwise overflow-y: scroll; */
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
Надеюсь, вы найдете это полезным:*