it-swarm.com.ru

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

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

В Google Chrome это:

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

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

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

overflow: hidden;

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

Можно ли как-нибудь убрать полосу прокрутки, но при этом можно прокрутить всю страницу? Только с CSS или HTML, пожалуйста.

891
Oussama Dooby

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

#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, появится точная ширина полосы прокрутки.

рабочая скрипта JavaScript

или же

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

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

JavaScript, работающий на скрипке

Информация:

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

668
Mr_Green

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

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

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

ОБНОВЛЕНО: добавлено новое свойство scrollbar-width для Firefox.

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

164
Hristo Eftimov

ОБНОВЛЕНИЕ: Firefox теперь поддерживает скрытие полос прокрутки с помощью CSS, поэтому теперь доступны все основные браузеры (Chrome, Firefox, IE, Safari и т.д.).

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

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 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;
}
136
Richrd

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

<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; as для MSDN .

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

72
Arpit Singh

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

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

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

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

Исправление в 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>
33
Timo Kähkönen

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

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

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

18
Innodel

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

9
Mischa

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

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

scrollbar-width: none;

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

7
Chris

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

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

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

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

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
user43353

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

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

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

box-sizing значения влияния заполнения или маржинальных решений, с которыми они работают 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;
}
5
Lucile Fievet

В современных браузерах вы можете использовать wheel eventhttps://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;
});
5
Doua Beri

Добавление отступа к внутреннему 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
herman

Вот как я это делаю для горизонтальной прокрутки, только 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>
4
Jean

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

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

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

Плагин perfect-scrollbar, кажется, является подходящим способом, смотрите: https://github.com/noraesae/perfect-scrollbar

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

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

3
jmarceli

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

Разметка выглядит следующим образом и должна находиться внутри чего-либо с относительным позиционированием (и ее ширина должна быть установлена, например, 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
user3638471

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

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

Мне довелось попробовать вышеуказанные решения в моем проекте, и по какой-то причине я не смог скрыть полосу прокрутки из-за расположения 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
Sriram Ranganathan

Другой тип хакерского подхода - сделать 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's есть отличная статья о том, как обнаруживать и обрабатывать события onmousewheel. Это может работать для вас, но это определенно не элегантное решение.

2
Gark Garcia

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

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

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

#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 в дочернем контейнере. Просто.

1
geoyws

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

0
Sibongiseni Bentley Msomi

2019: ответы выше работ.

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

height:0px; /* fixes issue with extra space underneath scrollbar */
width: 0px;  

0
zinoadidi

У меня была эта проблема, и это очень просто исправить.

Получите два контейнера. Внутреннее будет вашим прокручиваемым контейнером, а внешнее, очевидно, будет внутренним:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

Это супер просто и должно работать с любым браузером.

0
Jordan Michael Rushing