I need something like this:

var obj=document.getElementById('s');
obj.scrollRight(200);

HTML:

<div style="overflow-x=scroll;" id="s">
  Inline elements..
</div>

Important Note: I know there is a 'scrollTop(0)' function, but I need to know if there is a scrollRight(2) too!

I need something like this:

var obj=document.getElementById('s');
obj.scrollRight(200);

HTML:

<div style="overflow-x=scroll;" id="s">
  Inline elements..
</div>

Important Note: I know there is a 'scrollTop(0)' function, but I need to know if there is a scrollRight(2) too!

• javascript
• html
• css

Share Improve this question Follow asked Sep 15, 2017 at 7:01 Rajat SawantRajat Sawant 13311 gold badge11 silver badge99 bronze badges 2

• scrollRight is close, but it's actually Element.scrollLeft. – insertusernamehere Commented Sep 15, 2017 at 7:03
• Thanks, it works! I wish there was scrollRight too! – Rajat Sawant Commented Sep 15, 2017 at 7:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

If scrollRight would be something that you would want to use repeatedly, just build it yourself. It's easy to calculate how it should work:

HTML

<div class="container">
  <div class="big-element"></div>
</div>

CSS

.container {
  border: 1px solid #666;
  width: 1000px;
  height: 400px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.big-element {
  width: 1500px;
  height: 400px;
  background: linear-gradient(to right, #AAA, #CCC);
}

JS

const container = document.querySelector('.container');
const bigel = document.querySelector('.big-element');

function scrollRight(value) {
  const available = bigel.offsetWidth - container.offsetWidth;
  container.scrollLeft = available - value;
}

scrollRight(200);

And here's a pen for you to play with.

PS: if it's something that you really want to use more often, you could even build it into the Element prototype, though some people don't like doing that.

Use scrollLeft

scrollLeft IS scrollRight. Sort of.

All it does is set the amount of horizontal scroll. If you set it to zero then it will be all the way left. If you set it to something greater than zero then it will move to the right!

obj.scrollRight(200); is not a function. In javascript you can only set the horizontal scroll from the left. But neither then it's function. You just set obj.scrollLeft = 200; see example:

var obj = document.getElementById('s');
obj.scrollLeft = 200;

#s {
   border: solid 3px orange;
   width: 200px;
   height: 200px;
   overflow: scroll;
   /* you could also use: */
   /* overflow-x: scroll; */
   /* overflow-y: scroll; */
}

#s > div {
  background-color:orange;
  opacity: 0.5;
  width: 1500px;
  height: 1000px;
}

<div id="s">
  <div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>