Прокрутка не работает в мобильной версии ⇐ Jquery

[Anonymous]

Я работаю над проектом Javascript. Я создал элемент div с переполнением и прокручивал этот элемент только с помощью мыши (без панели). Я следовал этому рабочему примеру как в браузере, так и в мобильных версиях. Вот мой HTML-код:



... divs, boxes generated by jQuery ...




А вот CSS:

#wrapper {
margin-left: 45px;
position: absolute;
width: 900px;
overflow: hidden;
}
#scroller {
width: 100%;
height: 100px;
margin: 0px auto;
overflow: auto;
}


Теперь проблема в том, что это работает в браузере, но не работает на мобильном устройстве (без прокрутки).

РЕДАКТИРОВАТЬ:

#scroller div.line {
position: absolute;
margin-left: 2.5px;
margin-top: 39px;
border-bottom: 3px solid;
border-color: #dd4b39;
}
#scroller div.ranges {
position: absolute;
width: 90%;
text-align:left;
margin-left: 5px;
margin-top: 70px;
}
#scroller box.range {
position:absolute;
display: inline-block;
width: 30px;
height: 15px;
border-radius: 15%;
-moz-box-shadow:0px 0px 10px 1px #777777;
-webkit-box-shadow:0px 0px 10px 1px #777777;
-ms-box-shadow:0px 0px 10px 1px #777777;
-o-box-shadow:0px 0px 10px 1px #777777;
box-shadow:0px 0px 10px 1px #777777;
background-image: -ms-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -moz-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -o-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #A8A8A8), color-stop(1, #BFBFBF));
background-image: -webkit-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: linear-gradient(to bottom right, #A8A8A8 0%, #BFBFBF 100%);
z-index: 2;
}
#scroller div.lrange {
position:absolute;
display: inline-block;
width: 15px;
height: 100px;
margin-top: -70px;
border-right: 1px dotted;
border-color: #dd4b39;
}
#scroller div.circle_small {
position: absolute;
cursor: pointer;
display: inline-block;
margin: 0 3px;
margin-top: 32.5px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #CC3524;
background: -webkit-linear-gradient(top, #d14836, #dd4b39);
background: -moz-linear-gradient(top, #d14836, #dd4b39);
background: -ms-linear-gradient(top, #d14836, #dd4b39);
background: -o-linear-gradient(top, #d14836, #dd4b39);
background: -linear-gradient(top, #d14836, #dd4b39);
}
#scroller div.circle_big {
position: absolute;
cursor: pointer;
display: inline-block;
margin: 0px 3px;
width: 40px;
height: 40px;
margin-top: 20px;
border-radius: 50%;
background: #CC3524;
background: -webkit-linear-gradient(top, #d14836, #dd4b39);
background: -moz-linear-gradient(top, #d14836, #dd4b39);
background: -ms-linear-gradient(top, #d14836, #dd4b39);
background: -o-linear-gradient(top, #d14836, #dd4b39);
background: -linear-gradient(top, #d14836, #dd4b39);
}
#scroller div.circle_label {
cursor: pointer;
text-align: center;
font-size: 20px;
padding: 8px;
}


Подробнее здесь: https://stackoverflow.com/questions/172 ... le-version