Question

我正在构建一个水平扩展的网站，因为用户采取http://portal.azure.com样式的操作。当他们单击一个div中的按钮（从列表中）时，所选项目的详细信息将显示在旁边的另一个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 div出现时，它溢出。我怎样才能在任何时候滚动到右边缘？（你应该看看http://portal.azure.com看看我在说什么）

PS：我正在使用AngularJS。我不是在使用jquery。但我不介意包括它，如果它是唯一的选择

Answer 1

您可以使用普通的Javascript来保持向右滚动。

这样的事情：

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

每次添加新div时，都需要触发上述功能。这样，当动态添加div时，它将始终自动滚动。

您需要在容器上连接DOMNodeInserted事件。只要将div添加到row容器，就会调用该函数。这样您就不必更改现有代码中的任何内容。

这是一个动态添加div的简单示例：

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>

编辑：使用setTimeout添加简单动画（为了让jQuery远离）。理想情况下，如果您已使用requestAnimationFrame或合适的库，则应该使用它。

如何在页面宽度增加时自动滚动

1 个答案: