Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to make horizontal scrolling smoother

This fiddle is almost what I'm looking for, I got it from MDN. The only thing missing is that I want to make it smoother. Is there a way to do that without using jQuery or any other plugins?

Fiddle

        var button = document.getElementById('slide');
        button.onclick = function () {
            document.getElementById('container').scrollLeft += 100;
        };

        var back = document.getElementById('slideBack');
        back.onclick = function () {
            document.getElementById('container').scrollLeft -= 100;
        };
like image 608
Adrian Enriquez Avatar asked Jul 08 '14 15:07

Adrian Enriquez


People also ask

How do I make Chrome scroll smoothly?

Type chrome://flags in the Chrome address bar. Scroll down to find the Smooth Scrolling setting. Change the setting from Default to Disabled. Restart Chrome.

Is horizontal or vertical scrolling better?

Positives of horizontal scrollHorizontal scrolling saves a lot of vertical screen space. Rather than displaying all the content at once on a very long page, horizontal layouts introduce users to smaller chunks of information. The layout is much more flexible.


Video Answer


2 Answers

This could probably be optimised a fair bit, but here is a basic example of how you could do it using setInterval and clearInterval

Fiddle

Update

Here is another example of it wrapped into a function instead, bit easier to tweak the speed etc.

Fiddle

like image 123
presidentnickson Avatar answered Oct 02 '22 16:10

presidentnickson


You can also use the .scrollTo method. I've modified the jsFidlle with this javascript :

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo

var container = document.getElementById('container');
var input = document.getElementById('content');
var scrollAmount = 0;
var scrollMin = 0
var scrollMax = input.clientWidth

document.getElementById('slide').onclick = function () {
  container.scrollTo({
    top: 0,
    left: Math.max(scrollAmount += 500, scrollMax),
    behavior: 'smooth'
  });
};


document.getElementById('slideBack').onclick = function () {
  container.scrollTo({
    top: 0,
    left: Math.min(scrollAmount -= 500, scrollMin),
    behavior: 'smooth'
  });
};
like image 22
StudioB04 Avatar answered Oct 02 '22 15:10

StudioB04