Check Scrolling with CSS

Check scrolling with CSS

Determine by Cursor Location

One way you could do this would be to only show the .toTop element when the user is hovering over the content of the page itself, well below the header, and navigation links:

.toTop { opacity: 0; }
.toTop:hover, main:hover + .toTop { opacity: 1; }

You can see the effect here: http://jsfiddle.net/GFfbe/1/

Or, Slowly Uncover It

Alternatively, you could slowly uncover the .toTop link with another element. In the example below, I use the body's pseudo element ::before to cover up the .toTop element, and slowly reveal it as the user scrolls:

/* .toTop will appear in the left margin */
body {
    margin: 0 10em;
}

/* Positioned and sized to overlap .toTop */
body::before {
    content: "";
    background: white;
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 5em;
}

/* Positioned, so body::before goes behind it */
main {
    position: relative;
}

/* Attached to viewport at bottom left */
.toTop {
    z-index: -1;
    position: fixed;
    bottom: 1em; left: 1em;
}

You can see this effect here: http://jsfiddle.net/GFfbe/2/

How do I check if the user has scrolled down (or crossed ) to a particular element (based on id) in Angular7?

Basically, you can listen to window scrolling event with Angular using HostListener with window:scroll event like this:

@HostListener('window:scroll', ['$event'])
onWindowScroll() {
  // handle scrolling event here
}

Available StackBlitz Example for the explanation below

ScrolledTo directive

What I would do for maximum flexibility in this case is to create a directive to apply on any HTML element that would expose two states:

reached: true when scrolling position has reached the top of the element on which the directive is applied
passed: true when scrolling position has passed the element height on which the directive is applied

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[scrolledTo]',
  exportAs: 'scrolledTo', // allows directive to be targeted by a template reference variable
})
export class ScrolledToDirective {
  reached = false;
  passed = false;

  constructor(public el: ElementRef) { }

  @HostListener('window:scroll', ['$event'])
  onWindowScroll() {
    const elementPosition = this.el.nativeElement.offsetTop;
    const elementHeight = this.el.nativeElement.clientHeight;
    const scrollPosition = window.pageYOffset;

    // set `true` when scrolling has reached current element
    this.reached = scrollPosition >= elementPosition;

    // set `true` when scrolling has passed current element height
    this.passed = scrollPosition >= (elementPosition + elementHeight);
  }
}

Assign CSS classes

Using a Template Reference Variable you would then be able to retrieve those states specifying the directive export #myTemplateRef="scrolledTo" in your HTML code and apply CSS classes as you wish according to the returned values.

<div scrolledTo #scrolledToElement="scrolledTo">
  <!-- whatever HTML content -->
</div>

<div
  [class.reached]="scrolledToElement.reached"
  [class.passed]="scrolledToElement.passed">
  <!-- whatever HTML content -->
</div>

That way you can assign classes on other HTML elements or on the spied element itself ... pretty much as you want, depending on your needs!

Hope it helps!

Detecting end of scroll in a div

You can use element.scrollTop + element.offsetHeight>= element.scrollHeight to detect scroll end.

Update:
Also adding a condition so that it won't fire when scrolling upwards.
For more on upward scroll condition,you can check this link.

const element = document.getElementById('element');
let lastScrollTop = 0;
element.onscroll = (e)=>{
if (element.scrollTop < lastScrollTop){
      // upscroll 
      return;
   } 
   lastScrollTop = element.scrollTop <= 0 ? 0 : element.scrollTop;
    if (element.scrollTop + element.offsetHeight>= element.scrollHeight ){
       console.log("End");
    }
}

#element{
  background:red;
  max-height:300px;
  overflow:scroll;
}
.item{
height:100px;
}

<div id="element">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>

Detect scroll down

You can use window on scroll to check scroll possition; You can get scroll Position using $(window).scrollTop()

$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > 50) {
        $('#header').stop().animate({height: "30px"},200);
    }
    else {
         $('#header').stop().animate({height: "15px"},200);   
    }
});

Have a good day...

Detect element that is being scrolled

Edit: I added a function isScrollable so that if your scroller divs are not scrollable (eg. big screens or not enough content), they are not considered as a scrollable element.

You can try going through the ancestors of the target until you find one that is scrollable:

window.addEventListener('scroll', function(e) {  var el = e.target;  while (el && el !== document && !isScrollable(el)) {   el = el.parent;  }  log('Scrolled element: '+ (el.className || 'document'));}, true);
function isScrollable(el) {  return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;}
function log(x) {  document.querySelector('h2').innerHTML = x;}

/* Some CSS for the demo... */.scroller{width:6em;height:6em;float:left;overflow:scroll;border:4px solid #ddd;margin:.5em;position: relative}.inside{content:"";display:block;width:100em;height:100em;background:url(https://cms-assets.tutsplus.com/uploads/users/1604/posts/28343/image/WatermelonOrangePatternFinal.png)}.scroller.d .inside{width:100%;height:100%;opacity:.5}.scroller.d::before{position: absolute;z-index:5;content:"Not scrollable (not enough content)";font-size:.8em;}body{color:#fff;font-family:Arial,Helvetica,sans-serif}body::after{content:"";display:block;width:100em;height:100em;background:url(https://365psd.com/images/previews/b0c/icon-pattern-backgrounds-53906.jpg)}h2{position:fixed;bottom:.2em;left:0;width:100%;text-align:center}

<div class="scroller a"><div class="inside"></div></div><div class="scroller b"><div class="inside"></div></div><div class="scroller c"><div class="inside"></div></div><div class="scroller d"><div class="inside"></div></div><h2>Try scrolling</h2>

Check if a user has scrolled to the bottom (not just the window, but any element)

Use the .scroll() event on window, like this:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

You can test it here, this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content (document). If you wanted to instead check if the user is near the bottom, it'd look something like this:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

You can test that version here, just adjust that 100 to whatever pixel from the bottom you want to trigger on.

How to accurately determine if an element is scrollable?

Do you want to know if an element can ever scroll or can currently scroll?

Can an element ever scroll?

An element can scroll if it has a fixed height (or max-height) and overflow-y is scroll or auto. But since it's not easy to tell if an element's height is fixed or not, it's probably sufficient to just check overflow-y:

e.css('overflow-y') == 'scroll' || e.css('overflow-y') == 'auto'

Can an element scroll right now?

An element can scroll right now if its scrollHeight is greater than its clientHeight and if it has a scrollbar, which can be determined by comparing clientWidth and offsetWidth (taking margins and borders into account) or checking if overflow-y is scroll or auto.

Detecting scroll direction

It can be detected by storing the previous scrollTop value and comparing the current scrollTop value with it.

JavaScript :

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop){
      // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

Check Scrolling with CSS