Скрыть полосу прокрутки, но все еще в состоянии прокрутки


1129

Я хочу иметь возможность прокручивать всю страницу, но без показа полосы прокрутки.

В Google Chrome это:

::-webkit-scrollbar {
    display: none;
}

Но Mozilla Firefox и Internet Explorer, похоже, не работают так.

Я также попробовал это в CSS:

overflow: hidden;

Это скрывает полосу прокрутки, но я больше не могу прокручивать.

Есть ли способ удалить полосу прокрутки, но при этом можно прокручивать всю страницу?

Только с CSS или HTML, пожалуйста.

Ответы:


788

Просто тест, который работает нормально.

#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 */
}

Рабочая скрипка

JavaScript:

Поскольку ширина полосы прокрутки различается в разных браузерах, лучше обрабатывать ее с помощью JavaScript. Если вы это сделаете Element.offsetWidth - Element.clientWidth, появится точная ширина полосы прокрутки.

JavaScript работает скрипка

Или

Используя 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;
}

Рабочая скрипка

JavaScript работает скрипка

Информация:

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


16
В вашей последней "рабочей скрипке" я видел слишком много, !importantпоэтому я удалил их все: jsfiddle.net/5GCsJ/954
Роко С. Бульян

2
Это решение не работает, когда для ширины содержимого установлено значение auto. при прокрутке вправо часть содержимого все еще не видна. Это почему? Любые решения? Проверьте проблему здесь: jsfiddle.net/50fam5g9/7 Примечание: ширина контента не может быть заранее известна в моем случае, поэтому она должна быть установлена ​​на auto.
Sprout Coder

35
Этот подход не распространяется на все браузеры и будет очень специфичен для версии браузера, с которой вы работаете во время разработки.
Ицик Авидан

2
А как насчет горизонтальных полос прокрутки? Как вы можете скрыть это?
www139

11
Зачем усложнять и вычислять ширину полосы прокрутки? Просто установите box-sizing: border-box; width: calc(100% + 50px);и то же значение для заполнения. Ни один браузер не имеет ширины / высоты полосы прокрутки 50px, поэтому он должен просто охватить их все ...
Роберт Коритник,

362

Это легко в 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;
}

1
попробовал это в cordovaприложении, работал нормально. пришлось применить overflow:scrollк элементу.
Кишор Павар

41
Не работает на Firefox, довольно очевидно, так как это чисто веб-набор. Спасибо :)
Zohair

3
отлично работает в приложениях Electron, как и ожидалось, поскольку они хром. +1 спасибо: D
рококо

Начиная с iOS8, это не работает при использовании с-webkit-overflow-scrolling: touch
aleclarson

4
это работает с хромом. но не работает с Mozilla Firefox.
романский тандель

299

Это работает для меня с простыми свойствами CSS:

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

Для более старых версий Firefox используйте: overflow: -moz-scrollbars-none;


13
Для меня overflow: -moz-scrollbars-noneскрывает полосы прокрутки в Firebox, но также отключает прокрутку. Можете ли вы предоставить демо, где это работает для вас?
chipit24

1
К сожалению, -moz-scrollbars-noneсвойство удалено для новейших версий Firefox: developer.mozilla.org/en-US/docs/Web/CSS/overflow
Христо Ефтимов

2
Начиная с iOS8, это не работает при использовании с-webkit-overflow-scrolling: touch
aleclarson

3
Для устаревшего Firefox -moz-scrollbars-noneвы можете использовать @-moz-document url-prefix() { .container { overflow: hidden; } }. См. Stackoverflow.com/questions/952861/… .
Мартин Одила

1
Я обновил свой ответ с последней поддержкой Firefox :)
Христо Ефтимов

293

ОБНОВИТЬ:

Firefox теперь поддерживает скрытие полос прокрутки с помощью CSS, поэтому теперь доступны все основные браузеры (Chrome, Firefox, Internet Explorer, Safari и т. Д.).

Просто примените следующий CSS к элементу, из которого вы хотите удалить полосы прокрутки:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

Это наименее хакерское кросс-браузерное решение, которое я знаю в настоящее время. Проверьте демо.


ОРИГИНАЛЬНЫЙ ОТВЕТ:

Вот еще один способ, который еще не был упомянут. Это действительно просто и включает в себя только два 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;
}

39
Я знаю, что это новый ответ на старый вопрос, но сейчас это должен быть принятый ответ. Хороший материал человек.
Вектор

3
Это абсолютно лучший ответ, руки вниз. Теперь, как изменить его, чтобы скрыть горизонтальные полосы прокрутки?
CeeMoney

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

1
@Richrd - большое спасибо за демо - работает отлично. Не знаю, почему мы все делаем это так сложно, но это так просто, что я чувствую себя глупо, если не делаю этого раньше.
CeeMoney

4
Спасибо @Richrd! Я так рад, что прокрутил ваш ответ. Если бы у SO был какой-то «силовой ответ», я бы определенно использовал его сейчас.
Мартин Д

78

Использование:

<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 Эдж: -ms-overflow-style: -ms-autohiding-scrollbar;или , -ms-overflow-style: none;как в MSDN .

Для Firefox нет эквивалента. Хотя для этого есть плагин jQuery, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html


ictacademie.info/oussamaelbachiri этот сайт @Oussama Добби использует свойство media = 'screen', а затем свойство ':: - webkit-scrollbar' для css
Арпит Сингх

И каковы конкретные свойства CSS?
Усама Эль Бачири

либо хакерский макет, либо jquery - альтернатива
Арпит Сингх

Ваше первое решение дает мне эту проблему s24.postimg.org/idul8zx9w/Naamloos.jpg А что вы подразумеваете под хакерской версткой @ArpitSingh
Уссама эль Бачири

4
Следующее позволило мне включить встроенную прокрутку в Cordova с помощью jQuery Mobile 1.4 на iOS7 и iOS8 // CSS ::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; } // jQuery Mobile onMobileInit () $.mobile.touchOverflowEnabled = true;
Райан Уильямс,

33

Этот ответ не включает код, поэтому вот решение со страницы :

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

Хорошо, что вы не обязаны использовать отступы или разницу в ширине, чтобы скрыть полосу прокрутки.

Это также масштабирование безопасно. Решения с отступом / шириной показывают полосу прокрутки при увеличении до минимума.

Исправление в 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>


Это не будет работать для всех браузеров ... Только браузеры webkit. Вы используете специфичный для webkit селектор::-webkit-scrollbar {}
Префикс

Я проверил это во всех новых браузерах, прежде чем я ответил на вопрос. Также FF. Произошли некоторые изменения в FF?
Тимо Кяхконен,

Я обновил ответ. Кажется, что добавление padding-right: 150px;исправляет это. Испытано в FF, Chrome, Safari и Edge. Работает также при низких уровнях масштабирования из-за большого отступа вправо.
Тимо Кяхконен,

2
Поддержка Edge, IE 11, IE10 (возможно, ниже) html { -ms-overflow-style: none;}. В этих браузерах нет необходимости использовать padding-hack.
Тимо Кяхконен

Пришлось использовать ответ @ Timo и overflow-y: scrollполучить поведение прокрутки, но скрытое (как Chrome), чтобы оно работало на Edge23.
Jojo

21

Просто используйте следующие три строки, и ваша проблема будет решена:

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

Где liaddshapes - это имя div, куда идет свиток.


Покажите мне свою проблему в скрипке
Innodel

1
Просто и полезно, спасибо! Я использовал {display: none} вместо {width: 0;}, а также работаю
Санти Нуньес

2
Не работает на MS Edge или Firefox.
Дпедринья

18

Это работает для меня кросс-браузер. Однако это не скрывает собственные полосы прокрутки в мобильных браузерах.

В SCSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

В CSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

Что {}означают вложенные блоки ( )? Как это интерпретировать? А то &? Возможно, уточните в своем ответе?
Питер Мортенсен

Это вещь SASS (очевидно, МЕНЬШЕ): css-tricks.com/the-sass-ampersand
vipatron

@PeterMortensen Я только что увидел ваш комментарий сейчас, &::-webkit-scrollbarстановится .hide-native-scrollbar::-webkit-scrollbar { }в CSS
Murhaf Sousli

просто сделайте { width: 0; height: 0;}для :: - webkit-scrollbar вместо display: noneдля iOS.
Адриенденат

В FF71 это блокирует всю прокрутку.
ген б.

11

Следующее работало для меня в Microsoft, Chrome и Mozilla для определенного элемента div:

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}

обратите внимание, что scrollbar-width(только FF) помечен как «экспериментальный»
cimak

Да, @cimak, но в FF вы можете скрыть это без каких-либо проблем, поэтому он действительно используется только для Chrome.
Меломан

9

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 соответственно.

Проверьте это здесь (проверено в Internet Explorer и Firefox).


8

По состоянию на 11 декабря 2018 года (Firefox 64 и выше) ответ на этот вопрос действительно очень прост, поскольку Firefox 64+ теперь реализует спецификацию CSS Scrollbar Styling .

Просто используйте следующий CSS:

scrollbar-width: none;

Ссылка на выпуск Firefox 64 здесь .


3
Это очень приятно знать! Кажется, браузеры действительно прогрессируют, хаха!
Усама Эль Бачири

7

Использование:

CSS

#subparent {
    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);
}

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

Не уверен, почему это было отклонено, но я просто проголосовал за это, поскольку оно идет в правильном направлении, другие решения не очень хорошо работали в моем случае. переполнение-х: скрыто; + переполнение-у: прокрутка; это то, что удалось, наряду с шириной> 100% (110% в моем случае работало хорошо).
дАнгелов

1
это то же самое, что и решение с наибольшим числом голосов: попытка скрыть полосу прокрутки. это не идеально, потому что это зависит от браузера
mwm

6

использование

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, но я не уверен в других браузерах.


6

Это работает для меня:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

5

В современных браузерах вы можете использовать wheel event:

// 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;
});

Это ответ, который я искал. Спасибо. Я использовал overflow: hiddenэтот код, чтобы mat-card-content(в угловых 5, конечно) прокручивать, и это решило мою проблему. Примечание: я использовал e.deltaYкак свою, stepи она работала как обычная прокрутка, поэтому я думаю, что для нормальной прокрутки, но со скрытой полосой прокрутки, это лучшее совпадение.
imans77

1
страница, указанная здесь, предупреждает, что такой подход не подходит?
jnnnnn

5

Моя проблема: я не хочу никакого стиля в моем контенте HTML. Я хочу, чтобы мое тело можно было прокручивать напрямую без какой-либо полосы прокрутки и только вертикальной прокрутки, работая с сетками CSS для любого размера экрана.

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

Мне все еще нужна директива "-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;  /* 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;
}

4

Добавление отступов к внутренней части 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 + ')';

4

Вот как я делаю это для горизонтальной прокрутки; только CSS и хорошо работает с такими фреймворками, как Bootstrap / col- *. Для этого нужны только два дополнительных divs и родитель с набором a widthили max-width:

Вы можете выбрать текст для прокрутки или прокрутки пальцами, если у вас есть сенсорный экран.

.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>


Спасибо, попробовал, отлично работает. Одно это лучше изменить , margin-bottomчтобы быть , padding-bottomно с тем же значением. Это не сожжет ниже места для элемента в нижней части. Это предотвращает перекрытие.
haxpor

@haxpor Это margin-bottomотрицательное, я думаю, что оно не может быть изменено на a padding-bottom, которое не может обрабатывать отрицательные значения
Jean

4

Следующие стили 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;
  }
}

3

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

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

Соответствующий CSS выглядит следующим образом:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}

3

Это будет на теле:

<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;
}

3

Это решение для дивитизма, которое, тем не менее, должно работать для всех браузеров ...

Разметка выглядит следующим образом и должна находиться внутри чего-либо с относительным позиционированием (и ее ширина должна быть установлена, например, 400 пикселей):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}

3

perfect-scrollbarПлагин , кажется, путь, см: https://github.com/noraesae/perfect-scrollbar

Это хорошо документированное и полное решение на основе JavaScript для решения проблемы с полосами прокрутки.

Демонстрационная страница: http://noraesae.github.io/perfect-scrollbar/


2
Я не вижу, как это связано с вопросом?
Крис Невилл

3
В течение 2 минут пристально смотрел на совершенную полосу прокрутки, но сразу же не узнал, как ее использовать, чтобы скрыть полосу прокрутки . Если вы расширите свой ответ на эту тему, я уверен, что вы получите больше голосов.
Кристиан Вестербик

3

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

.element::-webkit-scrollbar { 
    width: 0 !important 
}

3

Чтобы скрыть полосы прокрутки для элементов с переполненным содержимым, используйте.

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}    

Поддержка практически отсутствует, за исключением FF, как вы упомянули, слишком мало для того, что запросил OP. Проверьте caniuse.com/#feat=mdn-css_properties_scrollbar-width
Adrien

@Adrien Ну, в Первоначальном вопросе говорилось, что у них есть решение для других браузеров. (Но Mozilla Firefox и Internet Explorer, похоже, не работают так), говорит он, именно поэтому я и дал решение Firefox.
Элвин Мойо

Я обнаружил, что это хорошо работает в сочетании с аналогом: div :: - webkit-scrollbar {display: none; } для Webkit / Chrome.
Шон Холлс

2

Другой вид хакерского подхода - сделать, overflow-y: hiddenа затем вручную прокрутить элемент примерно так:

function detectMouseWheelDirection(e) {
  var delta = null, direction = false;
  if (!e) { // If the event is not provided, we get it from the window object
    e = window.event;
  }
  if (e.wheelDelta) { // Will work in most cases
    delta = e.wheelDelta / 60;
  } else if (e.detail) { // Fallback for Firefox
    delta = -e.detail / 2;
  }
  if (delta !== null) {
    direction = delta > 0 ? -200 : 200;
  }
  return direction;
}

if (element.addEventListener) {
  element.addEventListener('DOMMouseScroll', function(e) {
    element.scrollBy({
      top: detectMouseWheelDirection(e),
      left: 0,
      behavior: 'smooth'
    });
  });
}

В блоге deepmikoto есть отличная статья о том, как обнаруживать onmousewheelсобытия и бороться с ними . Это может работать для вас, но это определенно не элегантное решение.


2

Я просто хотел поделиться комбинированным фрагментом для скрытия полосы прокрутки, которую я использую при разработке. Это коллекция из нескольких фрагментов, найденных в Интернете, которые работают для меня:

.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 */
}

1

Еще одна простая рабочая скрипка :

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

Переполнение скрыто в родительском контейнере и переполнение auto в дочернем контейнере. Просто.


Это не скрывает полосу прокрутки, она просто выталкивает ее из поля зрения влево.
robertmiles3

@ robertmiles3 разве это не одно и то же? прячешься и не видишь?
Брайан Уиллис

1
@ robertmiles3 выбранный ответ выше делает то же самое справа. Похоже, что все решения являются хакерскими, пока FIrefox не решит позволить CSS снова скрывать полосы прокрутки. blogs.msdn.com/b/kurlak/archive/2013/11/03/…
geoyws

Я должен согласиться. Это аналогичное решение, предложенное принятым ответом. Если это работает, это работает. проголосовал
JSON

1

Это хитрое решение работает даже в старом браузере IE

Это обходной путь к [ вертикальной полосе прокрутки ]

<html>
<head>
<style>
html,body{
         overflow:-moz-scrollbars-vertical;
         overflow-x:hidden;
         overflow-y:hidden;
         height:100%;
         margin:0 0 0 0
         }
</style>
</head>
<body id=body
      style="overflow:auto;
             height:100%" 
      onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
//your stuff here
</body> 
</html>

Просто попробуйте: jsfiddle


0

Просто установите ширину дочерней ширины до 100%, с отступом до 15 пикселей, overflow-xдля прокрутки и overflow:hiddenдля родителя и любой ширины, которую вы хотите.

Он отлично работает во всех основных браузерах, включая Internet Explorer и Edge, за исключением Internet Explorer 8 и ниже.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.