我希望使用按钮来实现水平滚动。
我有一个包含多个水平堆叠的div的容器,我想使用给定的按钮来滚动它们。
请看一下我的尝试,并告诉我我做错了什么。
HTML:
<div class="left">
left div
<button id="left-button">
swipe left
</button>
</div>
<div class="center" id="content">
<div class=internal>
div 1
</div>
<div class=internal>
div 2
</div>
<div class=internal>
div 3
</div>
<div class=internal>
div 4
</div>
<div class=internal>
div 5
</div>
<div class=internal>
div 6
</div>
<div class=internal>
div 7
</div>
<div class=internal>
div 8
</div>
</div>
<div class="right">
<button id="right-button">
swipe right
</button>
right div
</div>
JQUERY:
$('#right-button').click(function() {
event.preventDefault();
$('#content').animate({
marginLeft: "+=200px"
}, "slow");
});
$('#left-button').click(function() {
event.preventDefault();
$('#content').animate({
marginLeft: "-=200px"
}, "slow");
});
我已经尝试了在线上找到的解决方案。但是我的容器仍然在移动,即使我试图修复它。请参考链接:http://plnkr.co/edit/GxufhJaRJn2SfGb4ilIl?p=preview
#content
框的宽度,如果它大于.internal
宽度之和,则禁用按钮。在这里检查:https://jsfiddle.net/4d9uoe85/ - 尝试删除.internal
元素,直到只剩下3个,然后重新运行它,就应该禁用按钮。 - user1189882