Görgetősáv elrejtése, de a görgetés továbbra is lehetővé teszi a görgetést.

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

Working Fiddle

JavaScript:

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.

JavaScript munkafüzet

Or

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

Working Fiddle

JavaScript Working Fiddle

Információk:

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.