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并减去属性并向左滚动那么多。让我知道这是否适合您。

获取$('#results')[0]时需要使用scrollWidth,因为[0]返回元素的JavaScript版本,而$('#results')返回jQuery版本。 scrollWidthJavaScript属性,而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/

相关文章:

javascript - JavaScript setTimeout给出另一个超时

javascript - 暂停并继续使用 setInterval

javascript - 从其他Vue.js脚本获取数据

javascript - jQuery的追加过滤掉HTML像标签?

javascript - Internet Explorer 8中的HTML5和CSS3功能

css - float 更长的文本意外行为

javascript - 在 Gridx 中,如何用按钮替换 'select all' 标题?

javascript - 如何使用Javascript在textarea内添加按钮?

javascript - 如何更改我的 ajax 渲染属性的 anchor 标记中的 glyphicon?

jquery - 背景图像过渡不起作用