Javascript可滚动区域

Question

我有这个时间表。

http://jsfiddle.net/kthornbloom/zJ6kp/

我希望能够实现一些javascript，以便您可以单击并拖动以滚动时间轴类

.timeline {
    white-space:nowrap;
    overflow-x: scroll;
    padding:30px 0 10px 0;
    position:relative;
}

这是我尝试过的Javascript，但似乎没有用。

$('#timeline-wrapper').mousedown(function(e) {
    down = true;
    scrollLeft = this.scrollLeft;
    x = e.clientX;
}).mouseup(function() {
    down = false;
}).mousemove(function(e) {
    if (down) {
       this.scrollLeft = scrollLeft + x - e.clientX;
    }
}).mouseleave(function() {
    down = false;
});

实现这一目标的最佳方式是什么？

感谢。

Answer 1

您的代码确实有用。

确保您的选择器正确无误。没有id为'timeline-wrapper'的元素。）

$('.timeline').mousedown(function(e) {
...

还应用一些文本选择预防。像这样：https://stackoverflow.com/a/16805743/5483521

body {
    padding:25px;
    font-family:sans-serif;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;        
}

工作小提琴： http://jsfiddle.net/zJ6kp/415/