How to automatically scroll horizontally as page width increase

Question

I am building a website that expands horizontally as user takes action like http://portal.azure.com style. When they click a button(from a list) in one div, the details of the selected items appear in another div beside it. this can get really long and over flow the mother div.

I am looking for a way i can automatically scroll the page to the right most edge when a new div overflows.

layout

<div style="overflow-x: auto">
  <div layout="row">
    <div class="col" style="width: 400px">
    </div>

    //SHOWN DYNAMICALLY
    <div class="col" style="width: 400px">
    </div>

    //SHOWN DYNAMICALLY
    <div class="col" style="width: 400px">
    </div>

    //SHOWN DYNAMICALLY
    <div class="col" style="width: 400px">
    </div>

    //SHOWN DYNAMICALLY
    <div class="col" style="width: 400px">
    </div> 
  </div>
</div>

As you can see above, the first div shows by default but the other divs appear based on user interaction. By the time the 3 div appears, it overflows. How can i scroll to the right edge anytime it over flows? (you should really check out http://portal.azure.com to see what im talking about)

PS: i am using AngularJS. I am not using jquery. But i dont mind including it if its the only option

@vedantTerker Yes i currently have that over flow property set. but i ant the div to slide to the right most edge when it overflows — Raymond Ativie
– Raymond Ativie, Commented Aug 28, 2015 at 11:05
set some height in pixels for each div and add overflow-y:auto; overflow-x:hidden; — Ivan Stefanov
– Ivan Stefanov, Commented Aug 28, 2015 at 11:05
@ivanStefanov i don't have a problem with the overflow. i just want the overflown div to scroll automatically to the right when the overflow is applied — Raymond Ativie
– Raymond Ativie, Commented Aug 28, 2015 at 11:10

Abhitalks · Accepted Answer · 2015-08-28 13:46:53Z

You can use plain Javascript for keeping the scroll to right.

Something like this:

var myDiv = document.getElementById("row");
myDiv.scrollLeft = myDiv.scrollWidth;

You need to fire the above function every time you add a new div. That way it will always automatically be scrolled when divs are dynamically added.

You will need to hook up the DOMNodeInserted event on your container. The function will be called whenever a div is added to your row container. This way you will not have to change anything in your existing code.

Here is a very simple example with dynamically added divs:

var num = 1, 
    btn = document.getElementById('btn'), 
    row = document.getElementById("row");

scroller(); // fire teh scroller right away for initial scroll

// function to keep it scrolled towards right
// function scroller() { row.scrollLeft = row.scrollWidth; }

// edited to add simple animation
function scroller() { 
    var maxScroll = row.scrollWidth - row.clientWidth; // required to stop
    row.scrollLeft += 2; 
    if (row.scrollLeft < maxScroll) {
    	timer = window.setTimeout(scroller, 1000 / 60);
    } 
}

// hook up event to call scroller whenever an element is dynamically added
row.addEventListener("DOMNodeInserted", scroller);

// for demo to simluate dynamically adding divs
btn.addEventListener("click", function() {
    var newDiv = document.createElement("div");
    newDiv.setAttribute("class", "col");
    num += 1; newDiv.innerText = num;
    row.appendChild(newDiv);
});

div[layout] {
    width: 500px; height: 140px; white-space: nowrap;
    overflow: hidden; overflow-x: auto;
}
div.col { height: 140px; width: 400px; display: inline-block; text-align:center; }
div { border: 1px solid red; }

<div id="row" layout="row"><div class="col">1</div></div>
<button id="btn">Add</button>

Edit: Added simple animation using setTimeout (in order to keep jQuery away). Ideally you should be using requestAnimationFrame or a suitable library if you are already using one.

Wrap the 2-liner in a function, and call whenever you are adding a div.
@RaymondAtivie: There. I have updated the answer to include a sample demo for dynamically added divs.
@RaymondAtivie: Updated the answer to add a simple animation.

Collectives™ on Stack Overflow

How to automatically scroll horizontally as page width increase

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related