Скрыть браузерные полосы прокрутки

Question

Я использую плагин iscroll только в моем data-role="content" но на моей полной странице появляется огромная полоса прокрутки:

Я уже пробовал некоторые решения, найденные здесь, в таких как:

1. ответ пилсетниекс
2. Ответ Александра Прокофьева
3. ответ Джао
4. Mr_Green ответ

но никто не работает.

Я тоже проверяю этот сайт, но тоже не повезло.

Вы можете мне помочь?

Мой HTML:

<div data-role="content" data-theme="c">
            <div id="Container"></div>
            <div id="Treelist">
                <div id="scroller">
                    <ul id="Listview" ></ul>
                </div>
            </div>
        </div>

Мой CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;   
}

#Treelist {
    position:relative;
    z-index:1;
    top:0; 
    bottom:0; 
    left:0;
    width:100%;
    overflow: hidden;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;
    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

#scroller {
    position:relative; z-index:1;
/* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}


#Treelist ul {
    position:relative;
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}

#Treelist li {
    padding:0 10px;
    height:150px;
/*  line-height:40px; */
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}

Answer 1

Вы можете использовать это для того, чтобы скрыть полосы прокрутки:

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

#scroller {
-ms-overflow-style: none;
}

Просто посмотрите на это в разных браузерах, я уверен, что это работает в Safari, IE и Chrome

Answer 2

Это должно работать в браузерах на основе Webkit (Chrome/Safari), а также в IE 10+.

div::-webkit-scrollbar { width: 0 !important; display: none; }
div { -ms-overflow-style: none; }

К сожалению, нет хороших кросс-браузерных решений для редактирования полос прокрутки. Полосы прокрутки создаются браузером, и поэтому количество, которое мы можем сделать для них, ограничено тем, что позволяют браузеры. Я узнал, что лучше просто оставить их в покое, большинство людей даже не замечают их.