Menu
I have tried using kinetic.js and the code below, however when I try this in IE11 it keeps jumping to the top every time I scroll:
$("html").kinetic(); I want to make the page scrollable on tablets and IE10 and 11 so that users can just push the page up to scroll down as you would on mobile devices.
How can I do this in pure-JS or jQuery without it jumping to the top?
426
jQuery scroll() MethodThe scroll event occurs when the user scrolls in the specified element. The scroll event works for all scrollable elements and the window object (browser window). The scroll() method triggers the scroll event, or attaches a function to run when a scroll event occurs.
Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port. If the value of this option is set to false, it will prevent the DOM elements to be dragged .
The scrollIntoView method: The scrollIntoView() is used to scroll to the specified element in the browser. Example: Using scrollIntoView() to scroll to an element.
Definition and Usage The onscroll attribute fires when an element's scrollbar is being scrolled. Tip: use the CSS overflow style property to create a scrollbar for an element.
You can do this quite simply by recording the position of the mouse when clicked, and the current position when being dragged. Try this:
var clicked = false, clickY; $(document).on({ 'mousemove': function(e) { clicked && updateScrollPos(e); }, 'mousedown': function(e) { clicked = true; clickY = e.pageY; }, 'mouseup': function() { clicked = false; $('html').css('cursor', 'auto'); } }); var updateScrollPos = function(e) { $('html').css('cursor', 'row-resize'); $(window).scrollTop($(window).scrollTop() + (clickY - e.pageY)); } To prevent text selection while dragging, add the following CSS:
body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } Example fiddle
Update
Here's an version of the above as a jQuery plugin, extended to allow both vertical and horizontal scrolling via the settings. It also allows you to change the cursor that's used too.
(function($) { $.dragScroll = function(options) { var settings = $.extend({ scrollVertical: true, scrollHorizontal: true, cursor: null }, options); var clicked = false, clickY, clickX; var getCursor = function() { if (settings.cursor) return settings.cursor; if (settings.scrollVertical && settings.scrollHorizontal) return 'move'; if (settings.scrollVertical) return 'row-resize'; if (settings.scrollHorizontal) return 'col-resize'; } var updateScrollPos = function(e, el) { $('html').css('cursor', getCursor()); var $el = $(el); settings.scrollVertical && $el.scrollTop($el.scrollTop() + (clickY - e.pageY)); settings.scrollHorizontal && $el.scrollLeft($el.scrollLeft() + (clickX - e.pageX)); } $(document).on({ 'mousemove': function(e) { clicked && updateScrollPos(e, this); }, 'mousedown': function(e) { clicked = true; clickY = e.pageY; clickX = e.pageX; }, 'mouseup': function() { clicked = false; $('html').css('cursor', 'auto'); } }); } }(jQuery)) $.dragScroll();/* Note: CSS is not relevant to the solution. This is only needed for this demonstration */ body, html { padding: 0; margin: 0; } div { height: 1000px; width: 2000px; border-bottom: 3px dashed #EEE; /* gradient is only to make the scroll movement more obvious */ background: rgba(201, 2, 2, 1); background: -moz-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%); background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(201, 2, 2, 1)), color-stop(16%, rgba(204, 0, 204, 1)), color-stop(31%, rgba(94, 0, 201, 1)), color-stop(43%, rgba(0, 153, 199, 1)), color-stop(56%, rgba(0, 199, 119, 1)), color-stop(69%, rgba(136, 199, 0, 1)), color-stop(83%, rgba(199, 133, 0, 1)), color-stop(100%, rgba(107, 0, 0, 1))); background: -webkit-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%); background: -o-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%); background: -ms-linear-gradient(-125deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%); background: linear-gradient(-110deg, rgba(201, 2, 2, 1) 0%, rgba(204, 0, 204, 1) 16%, rgba(94, 0, 201, 1) 31%, rgba(0, 153, 199, 1) 43%, rgba(0, 199, 119, 1) 56%, rgba(136, 199, 0, 1) 69%, rgba(199, 133, 0, 1) 83%, rgba(107, 0, 0, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#c90202', endColorstr='#6b0000', GradientType=1); color: #EEE; padding: 20px; font-size: 2em; } body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>First...</div> <div>Second...</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
