Я хочу мати можливість прокручувати всю сторінку, але без відображення смуги прокрутки.
В 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 */
}
[Робоча скрипка][1]
Оскільки ширина смуги прокрутки відрізняється в різних браузерах, краще обробляти її за допомогою 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].
На основі цієї відповіді я створив простий плагін прокрутки.
Використовуй:
<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
Додавання
overflow: -moz-scrollbars-none;
спрацювало на мене.