pasaba por aqui pasaba por aqui - 4 years ago 158
CSS Question

Append div and scroll to the right

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>

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download