#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/javascript/browser-apis/observer-options

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░█████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/javascript/browser-apis/observer-options

Repovive

Observer Options - Browser APIs | JavaScript | Repovive

Repovive.

JavaScript22 sections · 783 units18h total

Open in Course

Observer Options

Configure intersection detection

Customize when the observer triggers:

const observer = new IntersectionObserver(callback, {
  root: null,        // viewport
  rootMargin: "50px", // trigger 50px before visible
  threshold: 0.5     // 50% visible
});

threshold can be a single value or array like [0, 0.5, 1] for multiple triggers.