При использовании планшетов у меня возникали проблемы с веб-сайтом, поскольку полоса прокрутки не прокручивалась.
Я полагаю, это потому, что для планшетов я не могу вызвать событие прокрутки.
HTML и CSS, представленные ниже!
.scroll-pane {
overflow: auto;
width: 99%;
float: left;
margin-bottom: 40px;
}
.scroll-content {
width: 1975px;
float: left;
padding-left: 10px;
}
.scroll-content-item {
width: 59px;
height: 75px;
float: left;
margin-top: -25px;
font-size: 14px;
line-height: 96px;
text-align: left;
font-weight: bold;
color: #b7b7b7;
}
.scroll-bar-wrap {
clear: left;
padding: 0 4px 0 2px;
margin: 0 -1px -1px -1px;
background-color: #f1f1f1;
}
.scroll-bar-wrap .ui-slider {
background: #f1f1f1;
border: 0;
height: 2em;
margin: 0 auto;
}
.scroll-bar-wrap .ui-handle-helper-parent {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.scroll-bar-wrap .ui-slider-handle {
top: .2em;
height: 1.5em;
}
.scroll-bar-wrap .ui-slider-handle .ui-icon {
margin: -8px auto 0;
position: relative;
top: 50%;
background-image: none;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 50px;
height: 15px;
cursor: default;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
display: block;
border: 0;
background-position: 0 0;
}
<div class="scroll-pane" style="overflow: hidden;">
<div class="scroll-bar-wrap">
<div class="scroll-bar ui-slider ui-slider-horizontal ui-widget ui- widget-content ui-corner-all" style="width: 99%;">
<div class="ui-handle-helper-parent"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 81%;"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></a>
</div>
</div>
</div>
</div>