javascript - 追加 div 并向右滚动

标签 javascript jquery css flexbox

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

最佳答案

我想这就是你想要的。基本上,它获取 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>

关于javascript - 追加 div 并向右滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42056455/

相关文章:

html - 如何高亮段落中的文字

javascript - 我可以禁用与 Canvas 的每个鼠标交互以与底层对象交互吗?

php - 日常风采网站

javascript - 从 Angular Factory 调用 JSON 文件不起作用

javascript - 通过脚本为一页上的动态对象添加静态附加p标签

jquery - 选项卡上的引导预加载器

javascript - 灯箱覆盖在关闭后仍然存在,页面 100% 高度

javascript - 语言识别和自动文本框方向切换

javascript - Node.js API 与 express 和 mysql - 仅在设置、等于和类似组合时应用搜索参数

javascript - 将 props 传递给 React 组件的最简洁方法?