Top method in Angular 6 for verifying if a scrollable section has been scrolled to the very bottom

I am searching for a reliable solution in Angular 6 to determine whether a scrollable host component has reached its maximum scroll bottom.

Despite my efforts, I have been unsuccessful in finding a functioning example of a function that can detect if a custom scrollable container (such as a div) has scrolled to the very bottom. I've come across information about IntersectionObserver, but it doesn't seem to be what I require. I've also tried various vanilla JS functions, but haven't been able to implement them effectively within Angular.

You can view my Stackblitz here: https://stackblitz.com/edit/mark6-messenger

Please note that this is needed for an Open Source Project. In my case, the <ng-container serves as the scrollable container: https://github.com/DevMonkeysDE/ngx-mark6/blob/master/projects/mark6-lib/src/lib/messenger/messenger-history.html#L1

The functionality should work seamlessly without requiring users to add any additional functions, ids, or elements to the component later on. The logic must be contained within the component itself.

javascriptangulartypescriptangular6

Answer №1

After troubleshooting your issue thoroughly, I have successfully resolved it using pure JavaScript. I have made the necessary changes in your code to achieve the desired outcome. Please follow the instructions below and let me know if this meets your requirements.

1. site-messanger.component.ts

@HostListener('scroll', ['$event']) 
        public scrollHandler(event) {
         let obj = document.getElementById('markMessageHistory');
         let objScrollHeight = Math.round((obj.scrollTop) * 100) / 100;
        if ( (objScrollHeight) === (obj.scrollHeight - obj.offsetHeight - 0.55)) {
                console.log('object to bottom');
            }
    }

2. site-messanger.template.html

<mark6-messenger-history id="markMessageHistory" (scroll)="scrollHandler($event)">
                    <mark6-messenger-message [messages]="messages" [avatarMe]="false" [avatarOthers]="true"></mark6-messenger-message>
                </mark6-messenger-history>

I have added an ID to your component. Now, when you scroll the component to the bottom, a console log will indicate that the component is at the bottom.

Note - The 0.55 margin adjustment has been made based on your specific requirements.

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

Which is more efficient: Implementing caching on the frontend or on the

Currently, I am using ajax to send requests to the backend server, where operations are performed and responses are received: function getData() { new Ajax().getResponse() .then(function (response) { // handle response }) .catch(functi ...

javascriptajaxhttpcaching

Exploring the idea of nesting Angular components with dynamic data

I am attempting to create a nested structure using multiple components in the following way. My objective is to pass user data into the user-item component without directly including the item component inside the list component. Main-App <app-user-li ...

angularvue.js

Error encountered while invoking web server method in C# through ajax resulting in a 500 Internal Server Error

Occasionally encountering a 500 internal server error when calling a server method from an AJAX request has left me perplexed. The inconsistency of the issue, sometimes working fine and sometimes not, is baffling. To add to the confusion, no changes were m ...

javascriptc#jqueryjsonajax

Guide to creating content on an NFC tag with Ionic

I am struggling with my button calling the test2 function and the code I have is not working as expected. Here is what I currently have: import { Component } from '@angular/core'; import { NFC, Ndef } from '@ionic-native/nfc/ngx'; @Com ...

angulartypescriptionic-frameworknfc

Transmitting a sequence of JSON information from php to JavaScript,

I am struggling to fetch a series of JSON data from PHP to my JavaScript file. Initially, I have multiple JSON data stored in an array in PHP, and I am echoing each one by looping through the array in my JavaScript file. <?php $result = array('{ ...

javascriptphpjqueryarraysjson

Troubleshooting problems with Angular CLI installation on a Mac machine

Having trouble installing an older version of Angular CLI as it keeps defaulting to 6.0.3. https://i.stack.imgur.com/JZFz4.png Any thoughts on why the @angular-devkit/core error version is showing up? Any suggestions? Current npm version: 6.0.1, Node.js ...

angularnpmangular-cli

Validating Angular input for decimal values based on specific criteria

Is there a way to limit user input to numbers with only 2 decimal places if both itemNew.UL_DATA and itemNew.LL_DATA are equal to 0 or blank? <ion-col col-2> <input (keypress)="ShowKey();" [style.display]="itemNew.UL_DATA== ...

angularionic-framework

Vue-Router functions only on specific routes

While my vue-router correctly routes the URL for all menu buttons, it's not displaying each Vue component properly. You can see a demonstration here. Here is a snippet of my HTML (using Vuefy) <div class="navbar-start"> <a ...

javascriptcssvue.jsvuejs2vue-router

Tips for displaying diverse content in a DIV container when users click on various sections of an image

Apologies for the unclear title, but I'm struggling to explain my technical goal using jargon. The basic concept is this: there will be an image on the webpage, and when a user clicks on a specific area of the image, relevant information will appear ...

javascriptjqueryhtml

Revamping the jQuery eye pupil tracker via the mousemove functionality

My goal with this code is to create an eye that follows the user's cursor direction. I found inspiration from this code snippet: https://codepen.io/J-Roel/pen/wWGNQN. However, since it was written in jQuery, I decided to convert it to vanilla JavaScri ...

javascriptjqueryvue.js

Jquery Mobile: Navigating back to the first page after calling changePage

In the process of developing a mobile app with phonegap/cordova and jquery mobile, I encountered an issue where the user is supposed to land on a specific page from a status bar notification. However, the app initially displays the default page briefly bef ...

javascriptjquerycordovajquery-mobile

Adding a characteristic to every item in an array of objects

Currently, I am utilizing Node.js along with Mongoose to interact with a MongoDB database and retrieve an array of objects from a specific collection. However, my aim is to add an additional property to each of these retrieved objects. Below, you can see t ...

javascriptnode.jsarraysexpressobject

Limit choosing to group child elements within ag-grid

Is there a way to disable row selection in ag-grid specifically for the rows used to group the grid? For example, clicking on rows labeled with "United States" and "2008" should not trigger selection. Only rows like the one highlighted in blue should be se ...

angulartypescriptag-grid

Adjusting the image placement within a modal window (using bootstrap 3)

Behold, an example modal: <!-- Large Modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Universal customization for Material-UI Select

I am attempting to customize the appearance of a select component within a React project using MUI 5. Specifically, I want to modify the border size and color when the select component is in focus. While other components can be styled globally using styleO ...

javascriptreactjsmaterial-ui

While using Angular CLI on GitLab CI, an error occurred indicating that the custom rule directory "codelyzer" could not be

ng lint is throwing an error on Gitlab CI stating: An unhandled exception occurred: Failed to load /builds/trade-up/trade-up/common/projects/trade-up-common/tslint.json: Could not find custom rule directory: codelyzer. The strange thing is that ng lint ru ...

angulartypescriptgitlablint

AngularJS array not refreshing following an AJAX request

Currently, I am still in the process of familiarizing myself with Angularjs and actively learning about its functionalities. One issue I have encountered is that when I define an array and loop through it using "ng-repeat," the items within ng-repeat fail ...

javascriptajaxangularjsangularjs-scopeangularjs-ng-repeat

Cart cannot function as a constructor

I'm currently learning express.js and trying to implement a shopping cart/session functionality into my project. Below is the code I have written so far, with a question at the end. Here is my cart.js: // Ensure that the file is required correctly b ...

javascriptexpress

Drop draggable items on top of each other

I'm wondering if there's a way to drag jQuery elements into each other. To illustrate my question, I've duplicated this code (link) and made some style changes. Here is the updated version: Fiddle Link. In the current setup, you can drag e ...

javascriptjqueryhtmljquery-uidraggable

Ways to dynamically generate a generic that expands a union class type

Reviewing the code snippet: const events = { a: ['event1' as const, 'event2' as const], b: ['event3' as const, 'event4' as const], }; class SomeClass< T extends AnotherClass<typeof events[keyof typeof ev ...

typescripttypescript-generics