Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Craig Watson
Craig Watson
27,930 Points

Slow Down Dragging and Scrolling Speed on Div with overflow: scroll...

Hi everyone...

Just working on a mobile mock up I want on my site and after long research and testing I'm getting it to a usable point .... BUT ...

The drag executes very quickly when you click on the content and move the mouse up or down.....

Also the jerky scrolling is nothing like a mobile device.......

CodePen

Can you help me either modify current code or add another function etc. to solve this ??

Hope you can help

Craig

1 Answer

moonshine
moonshine
8,449 Points

I changed some stuff around, but I belief this fixes that drag problem.

http://codepen.io/anon/pen/azjOZY?editors=001 

// Enable grab and drag function on dummy content
var clicked = false, clickY;
$(window).mousemove(function (e) {
    clicked && updateScrollPos(e);
});
$(window).mouseup(function () {
    clicked = false;
    $('.dummy-content-wrapper').css('cursor', 'auto');
});
$('.dummy-content-wrapper').mousedown(function (e) {
    clicked = true;
    clickY = e.pageY + $('.dummy-content-wrapper').scrollTop();
});
var updateScrollPos = function (e) {
    $('.dummy-content-wrapper').css('cursor', 's-resize');
    $('.dummy-content-wrapper').scrollTop(clickY - e.pageY);
    e.preventDefault();
}
Craig Watson
Craig Watson
27,930 Points

That is absolutely perfect Floris!!

I am still a little new to JavaScript and jQuery and this was not the easiest way to have a crack at it .. I really appreciate your help!

I am thinking of disabling the mouse wheel on that element so it encourages the drag but im concerned the effects that may come on a laptop trackpad when using the fingertip shortcuts for scrolling..

Do you know if this will have any affect or is there a clear difference in code to disable the scrolling effect when on trackpad...

Sorry to drag this question on just as i said im very new and really want the functionality of this to be great..

Thanks Again

Craig

moonshine
moonshine
8,449 Points

Scrolling with a trackpad is handled the same way as scrolling with mouse. Both are mousescroll events if that's what your asking? I'm using a trackpad by the way.

Craig Watson
Craig Watson
27,930 Points

Yes Floris that is what I was wondering..

Thank You!