CODEWITHSUNDEEP
javascripthtmlcssangularjsscroll
Raymond Ativie
Raymond Ativie

Reputation: 1826

How to automatically scroll horizontally as page width increase

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

Upvotes: 1

Views: 4700

Answers (1)

Abhitalks
Abhitalks

Reputation: 28387

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.

Upvotes: 4

Related Questions