Append div and scroll to the right

Question

I need to add a new "div" at the end of the existing ones in parent div and scroll to the right in order to see always the last add ones.

However, all my tries using jQuery "scrollLeft" have failed (note: use jQuery is not mandatory, in particular, solutions without it are welcome).

This is the example:

<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>    

</head>

<body>



<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>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

I think this is what you want. Basically it gets the scrollWidth and subtracts the attributes and scrolls left that much. Let me know if this works for you.

You need to use $('#results')[0] when getting the scrollWidth because [0] return the javascript version of an element whereas $('#results') returns the jQuery version. scrollWidth is a javascript property and width() is a jQuery function.

<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>    
</head>
<body>

<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>

Append div and scroll to the right

Sign up