How to set the x-position of scroll of a div with horizontal/overflow-x with pure javascript or angularjs ? Important: I'm not looking for jquery solutions - using angularjs,jquery wont work straightaway.

$anchorScroll() in angularjs scrolls to a vertical position but not to a horizontal position afaik. $window.scroll to or window.scrollTo(x,y) doesnt scroll within an overflow-x div. If anyone here is certail that methods I have tried would work under certain modifications, I would like to know as well.

How to set the x-position of scroll of a div with horizontal/overflow-x with pure javascript or angularjs ? Important: I'm not looking for jquery solutions - using angularjs,jquery wont work straightaway.

$anchorScroll() in angularjs scrolls to a vertical position but not to a horizontal position afaik. $window.scroll to or window.scrollTo(x,y) doesnt scroll within an overflow-x div. If anyone here is certail that methods I have tried would work under certain modifications, I would like to know as well.

• javascript
• angularjs
• scroll
• horizontal-scrolling

Share Improve this question Follow edited Oct 8, 2014 at 14:40 yash asked Oct 8, 2014 at 14:30 yashyash 18333 silver badges1212 bronze badges 5

• scrollLeft – hindmost Commented Oct 8, 2014 at 14:35
• @hindmost I tried some stuff with scrollLeft but it didnt work. Maybe I was doing it wrong. Would love to listen more about it. – yash Commented Oct 8, 2014 at 16:44
• 1 Without any code I can only guess about your problem – hindmost Commented Oct 8, 2014 at 18:31
• @hindmost, i was using this document.getElementById ('target_div').scrollLeft=amount-x-move; I will post more in my original quesion with more details in a while. – yash Commented Oct 8, 2014 at 22:00
• @hindmost: you're right, scrollLeft works. thanks. – yash Commented Oct 12, 2014 at 17:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can use $(selector).scrollLeft(amountToMove); on jQuery

document.getElementById(containerId).scrollLeft = amountToMove; using pure javascript or

angular.element(selector).scrollLeft(amountToMove); using angularjs.

I stumbled on this wile i was looking for cross browser solution to this problem!
I figure it out that scrollBy on elements only works for Firefox!
I know it is an old question but maybe someone also look for this like me...
Lets say div id is scroll :

    function ScrollByLeft() {
          document.getElementById("scroll").scrollBy(10, 0);
    }
    function ScrollByRight() {
          document.getElementById("scroll").scrollBy(-10, 0);
    }

    function ScrollLeft() {
          document.getElementById("scroll").scrollLeft=10;
    }
    function ScrollRight() {
          document.getElementById("scroll").scrollLeft=-10;
    }

div#scroll {
	width: 180px;
	overflow-x: scroll;
}

<div id="scroll">
<p>
    Scroll.strange.wery.long.word.horizontally.for.10.pixels.left.and.right.also.but.only.on.Firefox.as.I.know</p>
</div>
<button onclick="ScrollByLeft()">ScrollBy Left!</button>
<button onclick="ScrollByRight()">ScrollBy Right!</button>
<br>
<button onclick="ScrollLeft()">ScrollLeft Left!</button>
<button onclick="ScrollRight()">ScrollLeft Right!</button>

Limitation:
ScrollBy works only on Firefox as I know...
Other browsers can only scroll window this way!
NOT other elements...