Приховати смугу прокрутки, але з можливістю прокрутки

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

В Google Chrome вона є:

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

Але Mozilla Firefox та Internet Explorer, здається, так не працюють.

Я також спробував це в CSS:

overflow: hidden;

Це справді приховує смугу прокрутки, але я більше не можу прокручувати.

Чи можна прибрати смугу прокрутки, але при цьому зберегти можливість прокручування всієї сторінки?

Будь ласка, лише за допомогою CSS або HTML.

Peter Mortensen
Edited question 10-го листопада 2019 в 11:47
Програмування
internet-explorer firefox google-chrome html css
21-го травня 2013 в 1:11
17 погляди
Рішення

Просто тест, який працює нормально.

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

Оскільки ширина смуги прокрутки відрізняється в різних браузерах, краще обробляти її за допомогою JavaScript. Якщо ви зробите Element.offsetWidth - Element.clientWidth, то з'явиться точна ширина смуги прокрутки.

[Робоча скрипка JavaScript][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].

Інформація:

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

Peter Mortensen
Edited answer 10-го листопада 2019 в 11:49
Коментарі (23)

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

<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

Peter Mortensen
Edited answer 5-го квітня 2019 в 2:26
Коментарі (6)

Додавання

    overflow: -moz-scrollbars-none;

спрацювало на мене.

Peter Mortensen
Edited answer 5-го квітня 2019 в 2:26
Коментарі (5)