3

Please suggest a way to check if a user scrolled down.

as of now I have only the below way but only provide scroll count instead of the direction.

connectedCallback() {
    this.count = 0;
    window.addEventListener('scroll', () => console.log(`scrolled ${this.count++} times`));
}

I need to display a button which will scroll up to the top of the page but it needs to be rendered only if a user scrolled down and if user is already at the top or reached back to the top of the page then this button should not be rendered, I have created this button and it is working as expected the only problem is when to render and when not.

  • did you try using onscroll like onscroll={handleNotification} then in the function you can print console.log('Current value of the input: ' + evt.target.scrollTop); which will be 0 at the top – User6670 Nov 7 '19 at 13:10
  • And also in function handleNotification(evt) { console.log('Current value of the input: ' + evt.target.scrollTop); } – User6670 Nov 7 '19 at 13:42
  • Thank you for your response, but where should I put onscroll, please post this as an answer. – gs650x Nov 7 '19 at 15:12
2

Presuming the event is firing, you should be able to see if you're at the top via:

window.addEventListener('scroll', event => console.log(`scrolled to ${event.target.scrollTop}`));
| improve this answer | |
  • Thank you so much for responding I added the above line in the connected callback but didn't get any console log upon scrolling up and down on the page. – gs650x Nov 7 '19 at 13:00
  • @gs650x Yeah, I wasn't entirely sure that the event was firing to begin with, but that's how'd you access it. I suggest using a full-screen wrapper element and check for scrolling on that. – sfdcfox Nov 7 '19 at 13:57
  • could please provide any documentation related to full-screen wrapper element, I never used it before – gs650x Nov 7 '19 at 15:13
  • 1
    @gs650x Here's a playground for you. – sfdcfox Nov 7 '19 at 15:47
  • Thank you so much again for the playground now everything is working as expected but the top button has stopped working I have updated the code on playground with the button, request you to please take a look and suggest. – gs650x Nov 9 '19 at 9:59
1

Put onscroll on an element like

 <div class="app slds-p-around_x-large" onscroll={handleNotification}>

then in js

handleNotification(evt) 
{ console.log('Current value of the input: ' + evt.target.scrollTop); }
| improve this answer | |
  • Thank you so much for responding this is exactly what I am looking for it works as expected in playground but in real time I wrapped my whole code in a div tag with on scroll function but i am not getting any any console log when I scroll down, could you please suggest? – gs650x Nov 8 '19 at 13:14
  • can you share your code – User6670 Nov 8 '19 at 13:24
  • I solved the problem by updating the CSS – gs650x Nov 9 '19 at 10:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.