Javascript scrollable area

Question

I have this timeline.

I want to be able to implement some javascript so that you can click and drag to scroll across the timeline class

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

This is the Javascript that I've tried but it does not seem to work.

$('#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;
});

What would be the best way to implement this?

Thanks.

What have you tried so far to get dragging working? Where _specifically_ are you stuck? — Alex Wayne, Feb 21 '14 at 01:25
The best way to get people here to help you is to show them what you have attempted first. No one wants to take time to do your work for you for free. — Jared, Feb 21 '14 at 01:25
Sorry you are both right I apologies. The solutions I have found have been in Jquery and in this specific project we are trying to use all javascript. I've Edited the question with an example I've tried. — faooful, Feb 21 '14 at 02:01
jQuery is a library that is written in the language JavaScript. So your choice is to use jQuery or to _not_ use jQuery. But given that you are using jQuery based event handlers in your edit, are you saying you _do_ want to use jQuery? — Alex Wayne, Feb 21 '14 at 04:47
@faooful Also... `it does not seem to work` is not thinking like a programmer. What happens instead of what you expect? Do you get errors in your console? Does it sort of work but something bad happens you don't intend as well? There are a lot of interesting ways code can fail and each points to a different potential problem. Create a new jsfiddle that includes your attempted code and we can better tell you whats wrong with your solution then. — Alex Wayne, Feb 21 '14 at 04:51

score 0 · Answer 1 · edited May 23 '17 at 12:03

Your code does actually work.

Make sure your selector is correct. There was no element with the id 'timeline-wrapper').

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

Also apply some text selection preventation. Like this one : 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;        
}

Working fiddle : http://jsfiddle.net/zJ6kp/415/

Javascript scrollable area

1 Answers1