Javascript 追加div并向右滚动_Javascript_Jquery_Css_Flexbox

Javascript 追加div并向右滚动

javascript jquery css

Javascript 追加div并向右滚动,javascript,jquery,css,flexbox,Javascript,Jquery,Css,Flexbox,我需要在父级div中的现有div末尾添加一个新的div，并向右滚动，以便始终看到最后添加的div 但是，我所有使用jQueryscrollLeft的尝试都失败了（注意：使用jQuery不是强制性的，特别是不使用它的解决方案是受欢迎的）例如： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=U

我需要在父级

div

中的现有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>


清单1b
#结果{
字体大小：500%；
显示器：flex；
高度：4厘米；
对齐项目：居中；
溢出：自动；
}    
变量公式1=“1+2x”；
变量公式2=“=1+2y”；
var appendDiv=函数（f）{
var newDiv=$（“”+f+·”）；//这个div就是一个例子
var dstDiv=$（“#结果”）；
dstDiv.append（newDiv）；
//dstDiv.向左滚动（？？？）；
}    
setTimeout（函数（）{
附录D（公式1）；
}, 2000);
window.changeIt=函数（）{
附录D（公式2）；
}    
点击我

我想这就是你想要的。基本上，它得到了

滚动宽度，减去了属性和剩余的滚动。如果这对你有效，请告诉我
获取scrollWidth
时需要使用$（'#results'）[0]
，因为[0]
返回元素的JavaScript
版本，而$（'#results'）
返回jQuery
版本。scrollWidth
是JavaScript
属性和width（）
是一个jQuery
函数


清单1b
#结果{
字体大小：500%；
显示器：flex；
高度：4厘米；
对齐项目：居中；
溢出：自动；
变量公式1=“1+2x”；
变量公式2=“=1+2y”；
var appendDiv=函数（f）{
var newDiv=$（“”+f+“”）；//这个div就是一个例子
var dstDiv=$（“#结果”）；
dstDiv.append（newDiv）；
var left=$（“#结果”）[0]。scrollWidth-$（“#结果”）.width（）；
$（“#结果”）。向左滚动（左）；
}
setTimeout（函数（）{
附录D（公式1）；
}, 2000);
window.changeIt=函数（）{
附录D（公式2）；
}
点击我
我想这就是你想要的。基本上，它得到了滚动宽度，减去了属性和剩余的滚动。如果这对你有效，请告诉我
获取scrollWidth
时需要使用$（'#results'）[0]
，因为[0]
返回元素的JavaScript
版本，而$（'#results'）
返回jQuery
版本。scrollWidth
是JavaScript
属性和width（）
是一个jQuery
函数


清单1b
#结果{
字体大小：500%；
显示器：flex；
高度：4厘米；
对齐项目：居中；
溢出：自动；
变量公式1=“1+2x”；
变量公式2=“=1+2y”；
var appendDiv=函数（f）{
var newDiv=$（“”+f+“”）；//这个div就是一个例子
var dstDiv=$（“#结果”）；
dstDiv.append（newDiv）；
var left=$（“#结果”）[0]。scrollWidth-$（“#结果”）.width（）；
$（“#结果”）。向左滚动（左）；
}
setTimeout（函数（）{
附录D（公式1）；
}, 2000);
window.changeIt=函数（）{
附录D（公式2）；
}
点击我
要使代码正常工作，您需要进行计算以获得scrollLeft
属性的值（scrollWidth
属性减去容器的宽度）。此示例将帮助您了解其工作原理：
HTML代码：
<button id="add">Add div</button>
<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

#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;
}

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();

jQuery代码：
<button id="add">Add div</button>
<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

#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;
}

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();

var cont=$（“#容器”）；
var按钮=$（“#添加”）；
按钮。打开（“单击”，功能（）{
cont.append（“+（cont.find（“div”）.length+1）+”）；
滚动容器（）；
});
函数scrollContainer（）{
var available=cont[0]。scrollWidth-cont.width（）；
继续设置动画（{scrollLeft:available}，500）；
}
滚动容器（）；

以代码为例。
要使代码正常工作，您需要进行计算以获得scrollLeft
属性的值（scrollWidth
属性减去容器的宽度）。此示例将帮助您了解其工作原理：
HTML代码：
<button id="add">Add div</button>
<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

#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;
}

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();

jQuery代码：
<button id="add">Add div</button>
<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

#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;
}

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();

var cont=$（“#容器”）；
var按钮=$（“#添加”）；
按钮。打开（“单击”，功能（）{
cont.append（“+（cont.find（“div”）.length+1）+”）；
滚动容器（）；
});
函数scrollContainer（）{
var available=cont[0]。scrollWidth-cont.width（）；
继续设置动画（{scrollLeft:available}，500）；
}
滚动容器（）；

通过一个代码示例。
非常感谢，它能起到作用。请您添加两个说明。为什么需要写“dstDiv[0].scrollWidth”而不是“dstDiv.scrollWidth”，而不写“[0]”；为什么要用“dstddiv.width（）”而不是“dstDiv[0].clientWidth”