Разрешить прокрутку, но скрыть полосу прокрутки

У меня есть div с стилями стилей, например:

 <div style="overflow-y: auto; max-height: 300px;">< id="DivTableContainer" ></div>

Мне нужно разрешить прокрутку вдоль оси y, когда она становится выше 300px, это отлично работает. Но мне нужно установить "visiblity = false" для самой полосы прокрутки.

Я попытался использовать этот стиль элемента:

overflow-y: hidden;

Пока он скрывает полосу прокрутки, она также запрещает прокрутку. Есть ли способ получить прокрутку без видимости полосы прокрутки?

Ответ 1

Это лучше, если вы используете два контейнера div в HTML.

Как показано ниже:

HTML:

<div id="container1">
    <div id="container2">
        // Content here
    </div>
</div>

CSS

 #container1{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

 #container2{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 20px;
}

Ответ 2

Я знаю, что это старина, но вот быстрый способ скрыть полосу прокрутки с помощью чистого CSS.

Просто добавьте

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

К вашему id или классу div вы используете полосу прокрутки.

Вот полезная ссылка Пользовательская панель прокрутки в Webkit

Ответ 3

Попробуйте следующее:

HTML:

<div id="container">
    <div id="content">
        // Content here
    </div>
</div>

CSS

#container{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#content{
    width: 100%;
    height: 99%;
    overflow: auto;
    padding-right: 15px;
}

html, body{
    height: 99%;
    overflow:hidden;
}

JSFiddle Demo

Протестировано на FF и Safari.