Does anyone have experience with using angularjs infinite scroll within an inner DIV instead of just the browser window?
I'm trying to implement infinite scroll within a specific content wrapper that has its own scrollbar. The main page is fixed and does not scroll, but the inner content div does.
Is there a way to make the infinite scroll feature work in relation to the scrollbar of the inner content div?
If you happen to be searching for the same information and find yourself here, take a look at these helpful links:
https://github.com/BinaryMuse/ngInfiniteScroll/pull/7 (pull request and discussion)
https://github.com/hlsolutions/ngInfiniteScroll/tree/scroll-on-any-lement (fork with necessary functionality)
(source code)
Here is an example of how you can use it (using haml):
.div-with-overflow
%ul{data: {'infinite-scroll' => "getItems()", 'infinite-scroll-disabled' => 'cannotGetItems()', 'infinite-scroll-parent' => 'true'}}
By adding
'infinite-scroll-parent' => 'true'Check out this example written in pure HTML:
<div class="content">
<div infinite-scroll="addPage()" infinite-scroll-container='".content"'>
<div ng-repeat="recipe in recipes">
There are a couple of important things to note here:
.content enclosed within double quotes and then wrapped in single quotes. When you inspect the source code, you will see that this string value ultimately gets passed into document.querySelector. For more details on what values are accepted, refer to the documentation.If the immediate parent element of your infinite-scroll directive serves as the scrollable container, you can also utilize the infinite-scroll-parent helper as suggested by @trushkevich.
This discussion may be from a while back, but it remains pertinent.
It appears that ng-infinite-scroll has incorporated some of the forked solutions and now includes support for the following (unspecified) attributes:
infiniteScrollContainer allows you to specify the container using a query selector, function, or HTML element
infiniteScrollParent simply indicates that the parent should be used as the container (instead of $window)
Here is an example of how to use them:
<div class="scroller-companies" infinite-scroll="showMorePlaces()" infinite-scroll-parent="true">
Check out this awesome recommendation for infinite scrolling: ui-scroll. It includes a key feature of "removing elements when they are not visible and recreating them when they become visible again," which helps prevent the creation of unnecessary watchers and keeps your app running smoothly.
Modify the ng-infinite-scroll.js file by replacing all instances of $window with $("#my-content-container").
Note: An effective approach would be to include an attr parameter in the infinite-scroll that specifies the container's id.
use the code provided without any plugins required
Inside your controller, follow these steps:
$(".Scrollx").scroll(function () {
if ($('.Scrollx').scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
$scope.limit = $scope.limit + 5;
}
});
Adjust the value of the limit variable to control the initial display limit
example: $scope.limit=5
For my project, I have a unique challenge of creating an Arched square chart using High Charts. Despite my efforts, I have not been able to find any suitable platform that demonstrates this specific requirement. The task at hand is outlined as follows – ...
I am currently working on setting up a system where Ajax calls upload.php and expects a success or failure message in return. I attempted to use echo "success" in the php script, anticipating that xhr.responseText would capture the message. However, when I ...
Currently, I am utilizing my environment variables by directly referencing process.env.NODE_ENV throughout my application. While this method works, it is becoming challenging to manage and keep track of. Therefore, I would like to consolidate all these var ...
Currently, I have a regular expression that validates a single email address. How can I modify this regex to accept a list of email addresses separated by commas? ^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A- ...
I am facing a challenge with parsing multiple JSON objects within a single large JSON object. Currently, the entire JSON object is being stored as one entity, but I need to parse and store them separately in MongoDB. Below is the code snippet I am using. ...
Is there a way to hide or unhide table rows with form fields in a php website based on a dropdown selection using jquery/ajax? The current script I have only hides the field, leaving blank rows. How can I also hide the respective table rows? Thank you for ...
In my application, I have a Parent component that contains two different child components: inquiryForm and inquiryResponse. In certain situations, I need to toggle the visibility of these components based on specific conditions: If a user clicks the subm ...
When making HTTP requests with the native 'http' module, unicode characters are not displayed correctly in the response body. Instead of showing the actual value, question mark characters appear. Below is a snippet of the code that I am working w ...
Running into an issue with the nestedGroups in my code. Despite sorting the array before creating the items and nestedGroups, I'm encountering a problem where the first item is showing up in the last position on the timeline. https://i.sstatic.net/Ne ...
My goal is to increase sign-ups on my website by providing users with a unique JavaScript snippet to add to their own sites. I have two specific questions: 1) If I implement the following code to track visit duration on external websites, how can I ensure ...
Does getServerSideProps execute with every page request, or is it specifically for HTTP requests? ...
I'm having trouble saving data to my firebase database. Although I don't see any errors on the site, the data in firebase remains null and doesn't change no matter what I do. Here is the code snippet. HTML <html> <head> ...
My website's DOM structure is shown below: <ul> <li id="Browse"> Browse <ul id="browse-one"> </ul> </li> </ul> At the bottom of the page, my jQuery script looks like this: $("#Brow ...
I'm encountering some issues with Vue.js: Currently, I have a list of elements that I'm iterating through using v-for in my script. This array is retrieved from Axios (API) in the created() lifecycle hook. Additionally, I have a static variable ...
Here are the lines of code that I wrote in Express: res.write("The current temperature is "+temp+". "); res.write("Weather is currently "+weatherDes); res.write("<img src=" +imageURL+ ">"); res.send() ...
I am working on developing a slider similar to the McDonald's one: The main goal for my slider is to adjust to the container element size, so that when the user clicks the left or right buttons, the slider smoothly moves to the corresponding directio ...
I'm currently troubleshooting the /api/sentiment endpoint in postman and encountering a "cannot POST" error. I have confirmed that the routes are correct and the server is actively listening on port 8080. Interestingly, all other endpoints function wi ...
Encountered an error object: Error: ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password: YES) Type of (err): Object Now, I am looking to pass this object to another web service (REST API) What content ty ...
I have 8 paragraphs and I want to toggle the class 'one-active' when clicking on each of them, while removing the active class from the others. I currently have the code working for two paragraphs, but it's too lengthy for all eight. How can ...
There are two cloud functions in use: The first cloud function is used to set or update an existing scheduled job The second one is for canceling an existing scheduled job The management of scheduling jobs is done using import * as schedule from &ap ...