Question

我需要在父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>

Answer 1

我认为这就是你想要的。基本上，它获取scrollWidth并减去属性并向左滚动那么多。如果这对您有用，请告诉我。

获取$('#results')[0]时需要scrollWidth，因为[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>

Answer 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以及代码示例。

追加div并向右滚动

2 个答案: