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!
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
scrollLeftISscrollRight. 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>
scrollRightis close, but it's actually Element.scrollLeft.