Szeretném, ha az egész oldalon végig tudnék görgetni, de a görgetősáv megjelenítése nélkül.
A Google Chrome-ban ez a következő:
::-webkit-scrollbar {
display: none;
}
De a Mozilla Firefox és az Internet Explorer nem így működik.
CSS-ben is kipróbáltam ezt:
overflow: hidden;
Ez elrejti a görgetősávot, de nem tudok tovább görgetni.
Van rá mód, hogy eltávolítsam a görgetősávot, miközben továbbra is képes vagyok az egész oldalt görgetni?
Csak CSS vagy HTML segítségével, kérem.
Csak egy teszt, ami jól működik.
#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 */
}
Mivel a görgetősáv szélessége a különböző böngészőkben eltérő, jobb, ha JavaScript segítségével kezeljük. Ha az Element.offsetWidth - Element.clientWidth
értéket használod, akkor a görgetősáv pontos szélessége fog megjelenni.
A Pozíció: abszolút
használata,
#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;
}
A válasz alapján létrehoztam egy egyszerű görgető plugint.
Használja:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
Ez egy olyan trükk, amellyel a görgetősávot némileg átfedhetjük egy olyan átfedő div-vel, amely nem rendelkezik görgetősávval:
::-webkit-scrollbar {
display: none;
}
Ez csak a WebKit böngészőkre vonatkozik... Vagy használhatsz böngészőspecifikus CSS tartalmakat (ha lesz ilyen a jövőben). Minden böngészőnek más és más specifikus tulajdonsága lehetne a saját sávjaihoz.
A Microsoft Edge esetében használja: -ms-overflow-style: -ms-autohiding-scrollbar;
vagy -ms-overflow-style: none;
ahogy az MSDN szerint.
A Firefoxhoz nincs megfelelője. Bár van egy jQuery plugin ennek elérésére, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
A hozzáadása
overflow: -moz-scrollbars-none;
nálam működött.