The scroll bar will be automatically reset once the content inside is updated by using the $selector.html() function

I am looking to create a dynamic scrollable content feature.

Initially, I retrieve the data and set the content as follows:

    $("#sub_menu li").on("click", function () {
        $("#gallery").html(get_html($(this).attr("id")));
        $("#gallery").css("overflow-y", "scroll");
    });

The issue arises when new content is added but the scrollbar does not update automatically; it remains at the original height. How can I ensure that the scrollbar updates accordingly when new content is added to a scrollable div?

I want to use a custom scrollbar plugin, but I'm facing difficulties getting it to work after updating the content.

Below is the CSS for the gallery:

#gallery {
    width: 530px;
    float: right;
    height: 660px;
}

To see a demo, click on "Summer 2016" at this site:

kotechweb.com/new_focus/page/inspiration
javascriptjqueryhtmlcss

Answer №1

I hope this is useful

$("#sub_menu li").on("click", function () {
       $("#gallery").html(get_html($(this).attr("id"))).promise().done(function(){
            $(this).css("overflow-y", "scroll");
        });
    });

However, I am curious as to why you wouldn't just use overflow-y: auto; instead of including 

$("#gallery").css("overflow-y", "scroll");

#gallery {
    width: 530px;
    float: right;
    height: 660px;
    overflow-y : auto; 
}

Answer №2

When setting up your personalized scrollbar plugin, remember to include the following options 

advanced:{ updateOnSelectorChange: true }
:

$("#portfolio").customScrollbar({
    theme: "sleek-black",
    advanced:{ updateOnSelectorChange: true }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retain the background image in a fixed position?

Is there a way to fix the size of the picture in my code? The current size is 5834*3886, but when I minimize the browser, part of it disappears. Here is the CSS code I have written: .contact{ position: relative; min-height: 100vh; padding: 50 ...

cssbackground-image

It is not possible to submit two forms at once with only one button click without relying on JQuery

I need to figure out a way to submit two forms using a single button in next.js without relying on document.getElementById. The approach I've taken involves having two form tags and then capturing their data in two separate objects. My goal is to hav ...

javascriptreactjsnext.js

Most efficient method for nesting child objects within an array of objects using JavaScript

Hey experts, I'm on the hunt for the most efficient method to transform this data: [ { "id": 1, "animal": "cat", "age": 6, "name": "loky" }, { "id": 2, "animal": &quo ...

javascriptarraysjsonobjectnest

Having trouble getting CSS3 Keyframes to function properly?

Check out the following code snippet: .startanimation { height: 100px; width: 100px; background: yellow; -webkit-animation: animate 1s infinite; } @-webkit-keyframes animate { 100% { width: 300px; height: 300px; } ...

javascriptjquerycssanimationcss-animations

When incorporating express.static(), the Express .use() callback may be triggered multiple times

I'm in the process of verifying a user's identity, and once that is confirmed I aim to add them as a new user in my personal database using the information provided by the authentication server. The issue at hand is that the function createNewAc ...

javascriptnode.jsexpress

Issues with Next.js and Framer Motion

My component is throwing an error related to framer-motion. What could be causing this issue? Server Error Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function This error occurred during page generation. Any console logs will be ...

javascriptreactjstypescriptwebnext.js

What causes addEventListener to not return a value?

In this snippet of code: let rockClick = rockBtn.addEventListener('click', playRound.bind("rock", computerPlay(), false)); After using console.log(), the output is undefined. The purpose of rockBtn:const rockBtn = document.querySelecto ...

javascriptclickaddeventlistener

Understanding the mechanism behind how the import statement knows to navigate to the package.json file

I find myself stuck in bed at the moment, and despite numerous Google searches with no clear answers, I have chosen to seek help here. Could someone please clarify how scoping works when using import in TypeScript and determining whether to check the pack ...

javascripttypescriptnpmimport

Create type definitions for React components in JavaScript that utilize the `prop-types` library

Exploring a component structure, we have: import PropTypes from 'prop-types'; import React from 'react'; export default class Tooltip extends React.Component { static propTypes = { /** * Some children components */ ...

javascriptreactjstypescriptreact-proptypes

Exporting JSON data to CSV or XLS does not result in a saved file when using Internet Explorer

Presented below is the service I offer: angular.module('LBTable').service('exportTable', function () { function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel, fileName) { //If JSONData isn't an object, parse the ...

javascriptjsonexport

Divide the bootstrap form from the outcome

I am in the process of developing a basic web application using Bootstrap that involves taking user input on a form, sending it to a database, and then displaying the data in a table below the form. The main challenge I am facing relates to the styling asp ...

htmlcssformsbootstrap-4

Is there a way to dynamically compute the height of rows in a VariableSizeList based on their index?

Is there a method to dynamically calculate the height of rows in React using the react-window library? Since it's uncertain whether all rows will have the same size, I find myself needing to utilize VariableSizeList. However, I'm wondering if the ...

javascriptreactjsreact-window

Looking to display dropdown menus on a new line along with a text input field using jQuery?

<script type="text/javascript"> var arr = [{ val: 1, text: 'Option 1' }, { val: 2, text: 'Option 2' }]; $(function () { $('a').click(function () { var sel = $('<select>&apo ...

jquerycss

The background color spills outside the column when using 100% width

Bootstrap 5 is being used, and two columns have been created on the page. The current output looks like this: https://i.stack.imgur.com/P6oZs.png Now, there's a need to display an orange color from end to end of the left column. To achieve this, h- ...

htmlcsstwitter-bootstrapbootstrap-5

How can CakePhp's $ajax->link be used to manipulate the result on the complete action?

Recently, I've started working with cakePhp to handle ajax requests using prototype. While my controller is returning the correct value, I'm struggling to figure out how to properly handle it when it comes back looking like this: <?php echo ...

javascriptajaxcakephpprototypejshelper

In what way can a programmer create HTML tailored to a designer's needs, even without a comprehensive grasp of

Currently, I am diving into my most ambitious website project yet. It's worth mentioning that I'm utilizing ASP.NET MVC 2 and the Microsoft stack. I value design and aesthetics greatly, knowing they can make or break the success of this endeavor ...

htmlcss

Ways to modify the text of an HTML element when hovering over it

One of my elements contains the text &times; within a <span>. Is there a way to change this symbol to something else, like &infin;, when hovered over? <span class="change-text">&times;</span> When the mouse hovers over it, I ...

javascripthtmlcss

Different ways to create audio using GWT

Looking for ways to incorporate audio into your GWT app? I am considering creating a simple game, but it seems like there hasn't been much progress on direct audio support within GWT. This is likely due to the lack of underlying browser support, but I ...

gwtaudiohtml

"Here's a neat trick for assigning the value of a div to a text box without any identifiers like id or

I needed a way to transfer the value of a .item div into an empty textbox without any specific identifier. Then, when the input loses focus, the value should be sent back to the original .item div. $(document).on("click", ".item", function() { $(this) ...

javascriptjquery

Guide to obtaining ngPrime autocomplete text when the button is clicked within Angular 6

I am currently utilizing the ngPrime autocomplete feature to retrieve data from a service. My goal is to capture the text entered in the autocomplete field whenever a button is clicked. I attempted to access the value using getElementById.value within th ...

javascriptangularautocomplete