4

I made a couple of vertical scroll IntersectionObserver modules, but I'm interested in horizontal scroll (root will be a div and observation target will be an img). I want to observe the changes when the img becomes enlarged but the div remains the width of the viewport. I'm not even sure that mobile Safari will report a zoomed img as having a changed width, this is an experiment. Back to the question though, I haven't found any info. re: observing horizontal intersection so I'm not sure if that's supported?

Ted Fitzpatrick
  • 910
  • 1
  • 8
  • 18
  • 2
    Intersection observers aren't inherently related to scrolling at all. They just observe how much of the element is inside the view port; whether that changed because of a horizontal or vertical scroll, a CSS change, or something else doesn't matter. – IceMetalPunk Oct 09 '19 at 18:32
  • @IceMetalPunk ok so in your experience horizontal scroll is supported? – Ted Fitzpatrick Oct 09 '19 at 18:35

1 Answers1

6

To get an IntersectionObserver only in the x axis you can add to the options: rootMargin: "4000px 0px 4000px 0px".

Felipe Hernandez
  • 76
  • 1
  • 4
  • 1
    We should mention here that root Margin works when specifying the root element. – prieston Jan 26 '22 at 13:35
  • 1
    `rootMargin` supports %, so this could also be `rootMargin: "100% 0 100% 0"`. – Justin Anderson Mar 14 '22 at 23:26
  • 4
    @JustinAnderson it should be `rootMargin: "100% 0% 100% 0%"` or else an error is given Uncaught SyntaxError: Failed to construct 'Intersection': rootMargin must be specified in pixels or percent. – Esger Jun 02 '22 at 10:05