如何在sly.js的水平滚动部分中垂直滚动。
这是我的JavaScript和HTML。使用<div>和class="test"，我希望能够垂直滚动浏览。这对sly.js来说是否可能？
jQuery(function($) {
$('#frame').sly({
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateMiddle: 1,
scrollBy: 1,
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
swingSpeed: 0.2,
scrollBar: $('.scrollbar'),
elasticBounds: 1,
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
speed: 300,
startAt: 3,
});
});
<body>
<div class="scrollbar">
<div class="handle">
<div class="mousearea">
</div>
</div>
</div>
<div id="frame">
<ul class="slidee">
<li>
<div class="test"></div</li>
<li>
<p>Here is some text</p>
<img src="http://dummyimage.com/20x40/ccc/fff&text=2"></img>
</li>
<li>
<p>Here is some text. If we overflow.</p>
<img src="http://dummyimage.com/100x200/ccc/fff&text=3"></img>
</li>
<li>
<p>Here is some text</p>
<img src="http://dummyimage.com/20x40/ccc/fff&text=4"></img>
</li>
</ul>
</div>
</div>
</body>
答案 0 :(得分：1)
修改
我使用这个例子来重建你想要的东西。
jQuery(function($) {
$('#frame').sly({
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateOn: 'click',
scrollBy: 1,
mouseDragging: 1,
swingSpeed: 0.2,
scrollBar: $('.scrollbar'),
dragHandle: 1,
speed: 600,
startAt: 2
});
});#frame {
width: 300px;
height: 200px;
overflow-x: scroll;
}
ul {
display: flex;
flex-direction: row;
}
li {
margin: 10px;
width: 100px;
}<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://darsa.in/sly/js/sly.min.js"></script>
<div class="scrollbar">
<div class="handle">
<div class="mousearea"></div>
</div>
</div>
<div id="frame">
<ul class="slidee">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>