Сховати смугу прокрутки, але при цьому все ще можна прокручувати

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

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

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

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

Інформація:

На основі цієї відповіді я створив простий плагін прокрутки .

У 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 використовуйте: overflow: -moz-scrollbars-none;

ОНОВЛЕННЯ:

Зараз 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;
}

Це найменш хакізмене крос-браузерне рішення, про яке я зараз знаю. Перевірте демонстрацію.

ОРИГІНАЛЬНИЙ ВІДПОВІДЬ:

Ось ще один спосіб, про який ще не було сказано. Це дійсно просто і включає лише два діви та 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>

Це трюк, щоб дещо перекрити панель прокрутки перекриваючим дівом, у якому немає смуг прокрутки:

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

Ця відповідь не включає код, тому ось рішення зі сторінки :

Відповідно до сторінки, цей підхід не повинен достроково знати ширину смуги прокрутки, щоб працювати, і рішення також працює для всіх браузерів, і це можна побачити тут .

Хороша річ у тому, що ви не змушені використовувати прокладки або перепади ширини, щоб приховати смугу прокрутки.

Це також безпечне збільшення. Рішення накладки / ширини показують смугу прокрутки, коли її збільшують до мінімального.

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

Просто використовуйте наступні три рядки, і ваша проблема буде вирішена:

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

Де ліпдшапи - це назва діва, куди йде прокрутка.

Це працює для мене крос-браузера. Однак це не приховує рідні смуги прокрутки в мобільних браузерах.

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

Наступне працювало для мене на 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>

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

З 11 грудня 2018 року (Firefox 64 і вище) відповідь на це питання дійсно дуже проста, оскільки Firefox 64+ тепер реалізує специфікацію стилів прокрутки CSS .

Просто використовуйте наступний CSS:

scrollbar-width: none;

Посилання на замітку Firefox 64 тут .

Використання:

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>

Використовуйте

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, але я не впевнений у інших браузерах.

Це працює для мене:

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

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

У сучасних браузерах ви можете використовувати 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;
});

Моя проблема: я не хочу будь-якого стилю у своєму вмісті HTML. Я хочу, щоб моє тіло прокручувалося безпосередньо без смуги прокрутки, а лише вертикальна прокрутка, яка працює з CSS-сітками для будь-якого розміру екрана.

Рішення прокладки або маржинального значення на значення розміру коробки , вони працюють із розміром поля: 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;  /* 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;
}

Додавання прокладки до внутрішнього div, як у прийнятій на даний момент відповідь, не вийде, якщо ви з якоїсь причини хочете скористатися box-model: border-box.

У обох випадках працює ширина внутрішнього divдо 100% плюс ширина смуги прокрутки (якщо припустити, що це overflow: hiddenстосується зовнішнього діва).

Наприклад, у 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 + ')';

Ось так я це роблю для горизонтальної прокрутки; тільки CSS і добре працює з такими рамками, як Bootstrap / col- *. Потрібно лише два додаткових divs та батьків із a widthабо max-widthset:

Ви можете вибрати текст, щоб змусити його прокручувати або прокручувати його пальцями, якщо у вас сенсорний екран.

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

Мені трапляється спробувати вищезазначені рішення у своєму проекті, і мені чомусь не вдалося приховати смугу прокрутки через позиціонування 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*/
}

Це буде в тілі:

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

Це рішення для дивітів, яке, однак, має працювати для всіх браузерів ...

Розмітка полягає в наступному і має бути всередині чогось із відносним розміщенням (і його ширина повинна бути встановлена, наприклад, 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;
}

Можливо, perfect-scrollbarплагін - це шлях. Дивіться: https://github.com/noraesae/perfect-scrollbar

Це добре задокументоване і повне рішення на основі JavaScript для проблеми прокрутки.

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

Наступні стилі 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;
  }
}

Інший різновид хакі-підходу - це зробити, 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події та боротися з ними . Це може допомогти вам, але це, безумовно, не елегантне рішення.

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

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

Ви можете використовувати код нижче, щоб приховати смугу прокрутки, але, поки ще не можете прокручувати:

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

Щоб приховати смуги прокрутки для елементів із використанням переповненого вмісту.

.div{

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

}    

Ще одна проста робоча скрипка :

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

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

Переповнення, приховане на батьківському контейнері, і автоматичне переповнення на дочірньому контейнері. Простий.

Це складне рішення працює навіть у старому веб-браузері 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

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

Він чудово працює у всіх основних браузерах, включаючи Internet Explorer та Edge, за винятком Internet Explorer 8 і новіших версій.