I want to execute a function when the scrollbar reaches the bottom of the page.
How do I know if the scroll has reached the end of the page?
#HostListener("window:scroll", [])
onScroll(): void {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
console.log('end')
}
}
but it not work .
How can i do this work ????
Using that example is pretty easy. You can use the code inside the component's .ts file to use it. Check out this demo on CodeSandBox. I have implemented the fiddle in angular.
Here you can see the full-screen preview of the demo.
Related
I'm working on an Ionic 6 Webapp based on Angular 13. The client's QA-department want's to perform regression-testing via Selenium test-automatization. For other project's they used window.scrollBy(0, window.innerHeight) to systematically scroll over the page and take screenshots to find regression issues. But this is not possible on Ionic pages, since the HTML body is not scrollable, only the content of the ion-content element. Is there any way to trigger scrolling within the ion-content element via simple JavaScript? I created a Stackblitz where you can see the basic structure of my ionic-page.
So far I tried different things but none worked:
document.getElementsByTagName("ion-content")[0].scrollTo(0, 300);
document.getElementsByTagName("ion-content")[0].scrollToBottom();
document.getElementsByTagName("ion-content")[0].shadowRoot.childNodes[1].scrollTo(0, 300); //tried to access the inner-scroll div
document.getElementsByTagName("ion-content")[0].shadowRoot.childNodes[1].scrollToBottom(); //tried to access the inner-scroll div
why do you want JavaScript to scroll when ionic and angular have a better way to scroll. please check the stackblitz link I have done some code in it.
HTML
<ion-app>
<ion-header>Demo Header</ion-header>
<ion-content>
<div class="large-content-div"></div>
<p id="scrollMe">Scroll to find me</p>
</ion-content>
<ion-footer>Demo footer</ion-footer>
</ion-app>
TS File
export class AppComponent {
name = 'Ionic 6 Angular ' + VERSION.major;
constructor() {
setTimeout(() => {
this.scrollToBottom();
}, 5000);
}
scrollToBottom(): void {
try {
document.querySelector('#scrollMe').scrollIntoView({
behavior: 'smooth',
});
} catch (err) {}
}
}
Here, I have given both the solution if you want to scroll to the bottom scrollToBottom() method or you want to scrollTo some division points scrollTo() method, use it as per the requirement.
This is the best way to call scroll Event in Ionic/Angular
I would like to know, if there is a possibility for a user to instead of scrolling all the time there is a possibility to load directly the whole page (not an "auto-scrolling add-on).
I found this function here: ...infinite auto-scroll to bottom of page
function scrollToBottom(){
bottom = document.body.scrollHeight;
current = window.innerHeight+ document.body.scrollTop;
if((bottom-current) >0){
window.scrollTo(0, bottom);
setTimeout ( 'scrollToBottom()', 1000 );
}
};
scrollToBottom();
I ran it in my console and it appears to work. It looks like it could use a little work as the timer may never stop. Hope it helps.
I am trying to load data on page scroll and for this I am trying to run the following function
$(window).scroll(function ()
{
if($(document).height() <= $(window).scrollTop() + $(window).height())
{
alert("done")
}
});
The problem is, as per my page setting I have done body overflow:hidden and made a container scrollable, the above code is not working in this case, however when I enable the body scroll then its working fine, can anybody please suggest how to handle this?
Here is the JSFiddle demo
You need to check the element with class scroller instead of window for scroll position.
$('.scroller').scroll(function ()
{
if($('.scroller').scrollTop() >= ($('.scroller')[0].scrollHeight - $(window).height()) )
{
alert("load more data")
}
});
JS Fiddle: https://jsfiddle.net/n0rramke/5/
This should work (if I correctly understand your question):
if ($(".scroller").height() <= $(".scroller").scrollTop()) {
alert("load more data")
}
Fiddle: https://jsfiddle.net/rhbmxssv/ ...
I'm using bootstrap grayscale theme for my project and It has a navbar that collapses on scroll, or if I go to a link that's on the same page (#download etc.)
The problem is when I go to anchor link from some other page, than navbar doesn't collapse until I scroll.
I guess the solution is in adding the line in java script, but I really don't know what to add since I don't know java. :-(
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
Please, help. :) :-*
You need to run the check when the page loads as well as when the window is scrolled, you can do that without duplicating any code by putting the logic that checks the offset of the page in a function and running it from both document ready and window scroll.
$(document).ready(function() {
// Put your offset checking in a function
function checkOffset() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
}
else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
}
// Run it when the page loads
checkOffset();
// Run function when scrolling
$(window).scroll(function() {
checkOffset();
});
});
Edit:
I believe you could shorten this even more by replace the checkOffset function with the following:
// Put your offset checking in a function
function checkOffset() {
$(".navbar-fixed-top").toggleClass("top-nav-collapse", $(".navbar").offset().top > 50);
}
I haven't tested this, but as long as the second parameter in toggleClass returns a boolean it'll either add or remove the class depending on the offset of the page without needing an if statement.
You can also use :
$(document).ready(function() {
function checkOffset() {
$(".navbar").removeClass("show");
}
// Run function when scrolling
$(window).scroll(function() {
checkOffset();
});
// Run function on Clicking
$(window).click(function() {
checkOffset();
});
});
This will help with navbar collapse on mobile devices.
You should be able to do something as simple as this..
$('.navbar-collapse ul li a').click(function() {
/* always close responsive nav after click */
$('.navbar-toggle:visible').click();
});
Here's an example of use
It's not Java, it's JavaScript which is easily added to your html page using script tags.
I have seen a lot of websites which "wrapper" width is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site.
Can you give me tutorial or something on that ?
Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:
$('body').bind('click', function(e) {
if ($(e.target).closest('#container').size() == 0) {
alert('click');
}
}).bind('mouseover', function(e) {
if ($(e.target).closest('#container').size() == 0) {
$(this).css('cursor','pointer');
} else {
$(this).css('cursor','default');
}
});
In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.
If you'd like to do it here on StackOverflow you could do it with this bit of code.
$('body').bind('click', function(e){
if(!$(e.target).closest('#content').length) {
alert('ad outside content clicked');
}
});
Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.
You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever
Hope that helps
Tom
ps.
Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.