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

Question

我正在构建一个网站，该网站会随着用户采取像 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 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 或合适的库(如果您已经在使用一个库)。