好的,所以情况就是这样,我有一个水平滚动的div,结构看起来像这样。
<div class="extra-holder">
<div class="extra-holder-inner">
<ul>
<li>Stuff here</li>
<li>Stuff here</li>
<li>Stuff here</li>
<li>Stuff here</li>
</ul>
</div>
</div>
现在,内容在ul内部是动态的,因此固定的宽度已经消失。
我正在使用梦幻般的jquery mousewheel插件在div滚动中滚动而不是垂直滚动,工作非常精细。
尝试在触摸屏上滚动时出现问题,根本无法滚动。
所以,我天真的解决方案是只有两个按钮,并为内部容器,额外支架内部,左/右设置动画。
像这样:
$(document).ready(function() {
$('#scroll-r').click(function() {
$('.extra-holder-inner').animate({
left: '-=341' //animating by the width of the li's within the container
}, 500, function() {
// Animation complete.
});
});
});
$(document).ready(function() {
$('#scroll-l').click(function() {
$('.extra-holder-inner').animate({
left: '+=341'
}, 500, function() {
// Animation complete.
});
});
});
现在问题实际上是双重的,它是左/右动画容器而不是滚动它并且当左边没有其他项目时用户可以动画离开,这是一个无用的解决方案。
所以我需要做一些更复杂的事情,或者我需要想办法让这些按钮向左/向右滚动341px而不是动画容器。
想法,想法?