1

好的，情况就是这样，我有一个水平滚动的 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 滚动中的滚动水平而不是垂直滚动，工作得非常好。

尝试在触摸屏上滚动时会出现问题，您根本无法滚动。

所以，我幼稚的解决方案是只使用两个按钮并对内部容器、extra-holder-inner、左/右进行动画处理。

像这样：

$(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，而不是为容器设置动画。

想法，想法？

4

0 回答 0