如何随着页面宽度增加自动水平滚动

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

Answer 1

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 div s 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 div s:

 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.