CODEWITHSUNDEEP
javascripthtmlcss
user818700
user818700

Reputation:

How to set x and y scroll position on a div with overflow: scroll?

If I have the following markup:-

    .outerDiv {
      width: 500px;
      overflow: scroll;  
    }
    
    .innerDiv {
      width: 1000px;
    }
    <div class="outerDiv">
      <div class="innerDiv">
      </div>
    </div>

How do I (most likely with JavaScript) set the x and y position of that scroll?

Upvotes: 34

Views: 59853

Answers (3)

gazdagergo
gazdagergo

Reputation: 6721

A working example:

document.getElementById('mySection').scrollTop = 50
section {
  border: 1px solid gray;
  
  overflow-y: scroll;
  max-height: 50px;
}
<section id="mySection">
  <div>foo 1</div>
  <div>foo 2</div>
  <div>foo 3</div>
  <div>foo 4</div>
  <div>foo 5</div>
  <div>foo 6</div>
  <div>foo 7</div>
  <div>foo 8</div>
  <div>foo 9</div>
</section>

Upvotes: 1

abeyaz
abeyaz

Reputation: 3164

You can use scrollLeft and scrollTop properties. Ex:

document.getElementById("yourScrollElementId").scrollTop = 100

Or you can use jquery methods to make it easier and animated as well.

Upvotes: 57

Aviad
Aviad

Reputation: 531

You can use jQuery scrollLeft() and scrollTop() methods.

$('.outerDiv').scrollLeft(300);
$('.outerDiv').scrollTop(50);

Example: https://jsfiddle.net/upwrrj70/

Upvotes: 9

Related Questions