Insert a fresh item to the end of the scrollable container

Question

Insert a fresh item to the end of the scrollable container

My goal is to dynamically add a div to the bottom of another div by using a JavaScript button click event. However, I have encountered an issue where once the outer container reaches its maximum height, the list no longer scrolls to the bottom after adding a new item.

To see the issue in action, you can check out this JSFiddle

If you repeatedly click the red add button until there are around 13 items in the list, it appears that the scrollTop function stops working correctly and the scroll position remains static.

I've experimented with various CSS configurations for both the container and the added div, but I'm still struggling to find a solution. Any assistance would be greatly appreciated.

javascript html css

Answer 1

Answer №1

I have adjusted your code to make it more jQuery-friendly. The main modification I made was to update the list.scrollTop() function so that it now scrolls to the bottom of list:

$(document).ready(function() {
    var list = $("#q-d-list");

    $(document).on('click', '#add', function() {
        $('.active', list).removeClass("active");

        var count = list.children().length + 1;
        var active = $('<div />', {
            'data-qid': count,
            'class': 'mli active'
        }).text('q' + count).appendTo(list);

        list.scrollTop(list[0].scrollHeight);
    });
});

Check out the demonstration here: http://jsfiddle.net/MrvcB/19/

Answer 2

I have adjusted your code to make it more jQuery-friendly. The main modification I made was to update the list.scrollTop() function so that it now scrolls to the bottom of list:

$(document).ready(function() {
    var list = $("#q-d-list");

    $(document).on('click', '#add', function() {
        $('.active', list).removeClass("active");

        var count = list.children().length + 1;
        var active = $('<div />', {
            'data-qid': count,
            'class': 'mli active'
        }).text('q' + count).appendTo(list);

        list.scrollTop(list[0].scrollHeight);
    });
});

Check out the demonstration here: http://jsfiddle.net/MrvcB/19/

Answer 3

Answer №2

Implement

list.scrollTop(list.get(0).scrollHeight);

instead of

list.scrollTop($(".active").offset().top);

Answer 4

Implement

list.scrollTop(list.get(0).scrollHeight);

instead of

list.scrollTop($(".active").offset().top);

Answer 5

Answer №3

Check out this code snippet:

$(document).ready(function () {
var count = 2;

    $("#add").on("click", function () {
        var list= $("#q-d-list");

        // remove the active class from the old item
        var $clone = $(list.find("div:last-child").removeClass("active").clone());
        count+=1;

        var str_count = "q"+count.toString();
        $clone.addClass("active").attr("data-qid",str_count).text(str_count);
        list.append($clone);
        list.scrollTop(list.get(0).scrollHeight);        
    });
});

Click here to view the sample on jsFiddle!

Answer 6

Check out this code snippet:

$(document).ready(function () {
var count = 2;

    $("#add").on("click", function () {
        var list= $("#q-d-list");

        // remove the active class from the old item
        var $clone = $(list.find("div:last-child").removeClass("active").clone());
        count+=1;

        var str_count = "q"+count.toString();
        $clone.addClass("active").attr("data-qid",str_count).text(str_count);
        list.append($clone);
        list.scrollTop(list.get(0).scrollHeight);        
    });
});

Click here to view the sample on jsFiddle!

Insert a fresh item to the end of the scrollable container

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to use a single function to fill and calculate multiple input fields with PHP, Javascript, and

A guide on integrating the MUI Timepicker with the newest 6 version using Formik

Order of execution for setImmediate() and setTimeout() callbacks compared to I/O callbacks

Should I open the Intel XDK hyperlinks in the default web browser instead of

The best way to centralize the input group in bootstrap

Creating a dynamic image slider that smoothly glides across a webpage

The React JSX error you encountered is due to the missing return value at the end of the arrow function

The PHP for loop mysteriously adding an additional iteration

Discovering active path while utilizing dynamic routes - here's how!

Exploring Typescript: Understanding the nuances of importing and exporting values or references

Could a commenting feature be seamlessly integrated directly into the video player, accessible with a simple click?

What is the process for changing a jQuery countdown function to a count-up function?

Is it possible to set up a PHP variable within a JavaScript function?

Angular detects when a user scrolls on a webpage

What is the best way to make a JavaFX WebView the same size as the entire scene?

Do you think it's wise to utilize React.Context for injecting UI components?

Colorbox's functionality struggles to uphold several groups simultaneously without encountering errors

Read in a CSV document within my JavaScript application

When attempting to add or store data in MongoDB, it triggers a 500 server error

Filtering arrays using Vue.js