2
我正在開發一個Javascript項目。我創建了一個帶溢出的div，我只用鼠標滾動該div（沒有欄）。我在瀏覽器和移動版本上都遵循了this工作示例。這是我的HTML代碼：滾動不能在移動版本中使用
<div id="wrapper">
<div id="scroller">
... divs, boxes generated by jQuery ...
</div>
</div>
而這裏的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;
}
不幸的是，我沒有針對您的問題的解決方案。只是一個不請自來的意見。這種事情最終可能會在移動設備（或者瀏覽器）上變得非常煩人。我覺得我會期望瀏覽器滾動到一邊（正常情況下），但是我會在這個框中的文本中移動。只是我的觀點。考慮到這一點，你可能會考慮一個特定的用戶體驗，只是認爲我會提到。 – Gray
什麼風格與jquery創建的div相關聯？ – miah
我正在嘗試創建一個時間軸。請參閱編輯 – blueSurfer