Can the default position of the scrollbar be set to remain at the bottom?

I have a select option tag with a scrollbar to view the contents in the dropdown. I am looking for a way to automatically position the scroll at the bottom when an item is selected from the dropdown.

jquery code

$('document').ready(function(){
    $('#textin1').click(function() {
        var pos = $('#textin1').offset();
        pos.top += $('#textin1').width();
        
        $('#dropdown').fadeIn(100);
        $('#dropdown').scrollTop($('#dropdown').find('li:contains("'+$('#textin1').val()+'")').position().top);
        return false;
    });

    $('#dropdown li').click(function() {
        $('#textin1').val($(this).text());
        $('#dropdown li').removeClass('selected');
        $(this).addClass('selected');
        $(this).parent().fadeOut(100);
    });
});

Answer №1

Give this solution a try and see if it helps!

const scrollingElement = document.getElementById("scrolling-element");

const options = { childList: true };

const handleMutation = function (mutations, observer) {
  for (let mutation of mutations) {
    if (mutation.type === "childList") {
      window.scrollTo(0, document.body.scrollHeight);
    }
  }
};

const mutationObserver = new MutationObserver(handleMutation);
mutationObserver.observe(scrollingElement, options);

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

Identifying input value changes without needing to manually enter key values

As an example: <input class="table-input" type="number" name="qty" [(ngModel)]="cpy.qty" matInput min="1" max="{{cpy.qty}}" where cpy represents an object that is constantly changing. Currently, I need to execute a certain operati ...

Patience is key when letting AJAX calls complete their execution in jQuery functions

In each of my 3 functions, I have a synchronous AJAX call. Here is an example: function() { a(); b(); c(); } a() { ajaxGet(globals.servicePath + '/Demo.svc/GetDemoList/' + sessionStorage.SessionId,function(data, success) {}, '&apos ...

What can I do to stop my list items from dropping below the menu even when there isn't enough space?

I'm facing an issue with my menu and despite several attempts, I can't seem to resolve it. In Firefox, everything looks fine, but in other browsers, the last anchor tag inside my menu keeps collapsing underneath. I've tried various solutions ...

Understanding the Functioning of a Digital Analog Clock Using JavaScript

As a new learner, I found the operation of a Digital analog clock to be quite puzzling. I was presented with an image called clock.png, and I specifically struggled with how the hands of the clock function. Javascript - const deg = 6; // defining the valu ...

Node.js is experiencing difficulties loading the localhost webpage without displaying any error messages

I am having trouble getting my localhost node.js server to load in any browser. There are no errors, just a buffering symbol on the screen. The code works fine in VS Code. Here is what I have: server.js code: const http = require("http"); const ...

Showing the output variable from node.js on a canvas

Is it possible to display the output of my node.js program, which consists of a series of points (x,y), on canvas without a browser? I came across this module that could potentially help with displaying the points: (https://www.npmjs.com/package/canvas) ...

I'm curious about the correct method for updating a parent component using a shared service within the ngOnInit function in Angular version 13

There have been instances where I encountered a scenario multiple times, where I utilize a shared service within the ngOnInit of a component to update a value in another component, specifically its parent. This often leads to the well-known Error: NG0100: ...

MySQL field being updated upon page unload

I'm currently developing a Content Management System (CMS) that allows users to access and organize records within a MySQL database. One of the features I have implemented is a user login system for the CMS. As part of this project, I am working on in ...

Sending each step for evaluation

I am currently utilizing jQuery steps within a form wizard. I would like each step to display a different form every time it changes, along with previous and next buttons. Additionally, I am looking to submit the form via AJAX. However, when attempting to ...

Injecting navigation bar onto an HTML page using jQuery

After being a dedicated user of ASP, I have made the decision to switch to a Linux-based server for my website. However, as I begin to build my site, I am facing challenges that were once simple in ASP - such as loading a constant navigation bar. My objec ...

WordPress AJAX call results in a response code of zero

TL;DR: Unique - Go straight to code below for issue. You can view the demo I am working on by following this link. In my `functions.php` file, I first localize my script: function ajaxurl(){ wp_enqueue_script( 'product-selector', get_templ ...

Updating the ContextKey of the DynamicPopulateExtender based on the selected value from a DropDownList dynamically

I am facing an issue with my DynamicPopulateExtender control. I need it to render HTML based on the value of an asp:DropDownList. The problem lies in writing the JavaScript code that can fetch the dropdown value, assign it to the DynamicPopulate control&ap ...

The parameter type 'Event' cannot be assigned to the argument type

edit-category-component.html: <custom-form-category *ngIf="model" [model]="model" (onSaveChanges)="handleChanges($event)"></custom-form-category> <mat-loader *ngIf="!model"></mat-loader> edi ...

What is causing the issue with updating the user in MongoDB using this code?

Currently, I am working on fetching a team's schedule from an excel file and then adding those shifts to the user's shifts in MongoDB. I have tried adding them to an object first and then to the user's shifts field, but nothing seems to be h ...

Discover the potential of JavaScript's match object and unleash its power through

In the given data source, there is a key called 'isEdit' which has a boolean value. The column value in the data source matches the keys in the tempValues. After comparison, we check if the value of 'isEdit' from the data source is true ...

Incorporating unique typography onto your website (HTML/CSS)

I am currently struggling to implement a custom font on my website. I'm not very experienced with programming, and since my friend isn't available to help, I'd appreciate a solution from anyone. The issue I'm facing is that while the Ca ...

Sass: Setting a maximum width relative to the parent element's width

I have a resizable container with two buttons inside, one of which has dynamic text. Within my scss file, I am aiming to implement a condition where if the width of the container is less than 200, then the max width of the dynamic button should be 135px, ...

Node.js and Express: ensuring completion of asynchronous operation before responding to HTTP request

Imagine there is a callback function set up for an HTTP GET request, structured like this: router.get('/latestpost', function(req, res, next) { var data = new FbData(); get_latest_post (data); get_post_image (data); res.json(da ...

The mobile screen size shortcuts are malfunctioning, while the regular links are functioning properly

ISSUE: Links in alias buttons are not working on mobile screen size, while normal links to other webpages like social media work fine. Description I created a project using an HTML, CSS, JS building tool from The project was exported and placed into a ...

Querying with Codeigniter in Ajax Data table only returns a single row

When using codeigniter to create an ajax data-table, I pass the User ID as a condition to retrieve records from a product orders table. $this->datatables->select('orders.order_user_id,orders.order_date,orders.order_id,orders.order_confirmation_ ...