如何隨着頁面寬度增加水平自動滾動

我正在構建一個網站，用戶採取類似http://portal.azure.com風格的動作時水平展開。當他們點擊一個div中的按鈕（從列表中）時，所選項目的細節將出現在旁邊的另一個div中。這可能會變得非常漫長，流過母親分區。如何隨着頁面寬度增加水平自動滾動

我正在尋找一種方法，當新的div溢出時，我可以自動將頁面滾動到最右邊緣。

佈局

<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>

正如你可以在上面看到，第一個div表示默認，但其他的div出現基於用戶交互。 3格出現時，它溢出。如何在任何時候滾動到右邊緣流動？（你應該真的看看http://portal.azure.com看看我在說什麼）

PS：我正在使用AngularJS。我沒有使用jQuery。但我不介意包括它，如果它的唯一選項

來源

2015-08-28 Raymond Ativie

@vedantTerker是的，我目前有超過流屬性設置。但我螞蟻div滑到最右邊時，它溢出 –

設置一些'高度'像素爲每個'div'並添加'overflow-y：auto; overflow-x：hidden;' –

使用引導它可以使網格類變得簡單。 –

您可以使用純Javascript保持向右滾動。

事情是這樣的：

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

你需要每次添加一個新的div時間來觸發上述功能。這樣，當動態添加div時，它總是會自動滾動。

您需要連接容器上的DOMNodeInserted事件。只要將div添加到您的row容器中，就會調用該函數。這樣你就不需要改變現有代碼中的任何東西。

這裏是一個非常簡單的例子與動態添加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) { 
 
    \t 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>

編輯：使用setTimeout（爲了保持jQuery的路程）添加簡單的動畫。理想情況下，如果您已經在使用或合適的庫，則應該使用。

來源

2015-08-28 11:12:13 Abhitalks

如果'div.col'是動態添加的，這會工作嗎？ –

將函數包裝在一個函數中，並在添加'div'時調用。 – Abhitalks

@RaymondAtivie：那裏。我已經更新了包含動態添加div的示例演示的答案。 – Abhitalks

如何隨着頁面寬度增加水平自動滾動

回答

相關問題