追加 div 并向右滚动答案

【问题标题】：Append div and scroll to the right追加 div 并向右滚动
【发布时间】：2017-02-06 09:01:47
【问题描述】：

我需要在父 div 中现有 div 的末尾添加一个新的 div 并向右滚动以始终查看最后添加的。

但是，我所有使用 jQuery scrollLeft 的尝试都失败了（注意：使用 jQuery 不是强制性的，特别是，欢迎使用没有它的解决方案）。

这是一个例子：

<!DOCTYPE html>
<html>
    <head>    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1">    
        <title>list1b</title>    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <style>    
            #results {
                font-size: 500%;
                display: flex;
                height: 4cm;
                align-items: center;
                overflow: auto;
            }    
        </style>

        <script>    
            var formula1 = "1 + 2x";
            var formula2 = "= 1 + 2y";

            var appendDiv = function (f) {
                var newDiv = $("<div style='min-width:10cm;'>" + f + ·</div>"); // this div is an example
                var dstDiv = $('#results');
                dstDiv.append(newDiv);
                //dstDiv.scrollLeft(???);
            }    

            setTimeout(function () {
                appendDiv(formula1);
            }, 2000);

            window.changeIt = function () {
                appendDiv(formula2);
            }    
        </script>

    </head>

    <body>

        <div id="results" class="results"></div>

        <button onclick='changeIt()'/>click me</button>

    </body>

</html>

【问题讨论】：

标签： javascript jquery css flexbox

【解决方案1】：

我想这就是你想要的。基本上，它得到scrollWidth 并减去属性和向左滚动那么多。让我知道这是否适合您。

在获取scrollWidth 时需要使用$('#results')[0]，因为[0] 返回元素的JavaScript 版本，而$('#results') 返回jQuery 版本。 scrollWidth 是 JavaScript 属性，width() 是 jQuery 函数。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>list1b</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <style>
            #results {
            font-size: 500%;
            display: flex;
            height: 4cm;
            align-items: center;
            overflow: auto;
        </style>

        <script>
            var formula1 = "1 + 2x";
            var formula2 = "= 1 + 2y";

            var appendDiv = function (f) {
                var newDiv = $("<div style='min-width:10cm;'>" + f + "</div>"); // this div is an example
                var dstDiv = $('#results');
                dstDiv.append(newDiv);
                var left = $("#results")[0].scrollWidth - $("#results").width();
                $('#results').scrollLeft(left);
            }

            setTimeout(function () {
                appendDiv(formula1);
            }, 2000);

            window.changeIt = function() {
                appendDiv(formula2);
            }
        </script>
    </head>

    <body>
        <div id="results" class="results"></div>

        <button onclick='changeIt()'/>click me</button>
    </body>

</html>

【讨论】：

非常感谢，它成功了。拜托，你能补充两个澄清吗？为什么需要写“dstDiv[0].scrollWidth”而不是没有“[0]”的“dstDiv.scrollWidth”；以及为什么使用“dstDiv.width()”而不是“dstDiv[0].clientWidth”。
是的，我会将其添加到答案中。

【解决方案2】：

您的代码中缺少某些内容以使其正常工作，您需要进行计算以获得scrollLeft 属性的值（scrollWidth 属性减去容器的width）。此示例将帮助您了解其工作原理：

HTML 代码：

<button id="add">Add div</button>
<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS 代码：

#container {
    font-size: 0;
    height: 50px;
    overflow: scroll;
    width: 500px;
    white-space: nowrap;
}

#container div {
    background: #F00;
    border-right: 1px solid #FFF;
    color: #FFF;
    display: inline-block;
    font-size: 14px;      
    height: 100%;
    line-height: 50px;
    text-align: center;
    width: 250px;
}

jQuery 代码：

var cont = $("#container");
var button = $("#add");

button.on("click", function () {

    cont.append("<div>" + (cont.find("div").length + 1) + "</div>");

    scrollContainer();

});

function scrollContainer() {

    var available = cont[0].scrollWidth - cont.width();

    cont.animate({scrollLeft: available}, 500);

}

scrollContainer();

Here you have a jsfiddle 带有代码示例。

【讨论】：