勢いのある画像をどの方向にも自由自在にスライドさせたい(スナップなし)。
iScroll4に出会いました。これは素晴らしいスクリプトです (iOS と Android でうまく動作します)。
JS コード:
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',
{ hScrollbar: false,
vScrollbar: false,
snap:false,
vScroll: true,
hScroll: true
});
}
HTML コード:
<div id="wrapper">
<div id="scroller">
<div id="thelist">
<img id="theImg" src="https://www.google.com/images/srpr/logo4w.png" width="300px" height="200px">
</div>
</div>
</div>
CSS:
body,ul,li {
padding:0;
margin:0;
border:0;
}
#wrapper {
position:absolute;
z-index:1;
top:-500px;
bottom:0px;
left:-500px;
width: 100%;
height: 100%;
overflow:auto;
background-color: red;
}
#scroller {
position:absolute;
z-index:1;
padding:0;
width: 2000px;
height: 5000px;
background-color: blue;
}
#thelist {
list-style:none;
padding:0;
margin:0;
text-align:left;
background:none;
background-color: yellow;
}
#theContent {
background-color: grey;
}
#theImg {
position: relative;
top: 500px;
left: 500px;
}
ラッパーを画面よりも大きくして、画像が画面の外にスライドできるようにしてから、画像を相対的な位置に配置して、最初に画面に表示されるようにしました。
しかし、私は上または左のスナップを取り除くことができないようです.
ここで何が間違っていますか?
あるいは、同じ仕事をすることができる別のライブラリはありますか?