2d:null 2e:["$","title",null,{"children":"Intersection Observer Tutorial #1: Scrolling Slides | Gabriel Gianordoli | Observable"}] 33:T4d5,md ` # Intersection Observer Tutorial #1: Scrolling Slides In this example we will build a simple scrolling slides engine using intersection observer and see how different \`rootMargin\` settings can change its behavior. *Note: if you’re looking for a basic introduction to Intersection Observer, take a look at [this notebook](https://observablehq.com/@gianordoli/intersection-observer-tutorial). Other posts in this series are:* * [Intersection Observer Tutorial #2: Nav](https://observablehq.com/@gianordoli/intersection-observer-tutorial-nav) * [Intersection Observer Tutorial #3: State](https://observablehq.com/@gianordoli/intersection-observer-tutorial-3-state) ## Example Consider the following markup, where we have a sticky background (the pink box) and some captions scrolling on top of it. We want each caption to display something different on the pink box. For the sake of simplicity, let’s show just a number — “1” for the first caption, “2” for the second one and so on. You can adapt this code to display different images or background colors if you want. *Note: we are splitting the style and markup onto separate ObservableHQ cells so they can be reused on another example further down the page.*`34:T43f,md `Now if you go back to the **Example 1** and scroll down, it will look like this is working fine. But try to scroll down and then up again, you will see that the numbers won’t correspond to what you expect. The issue here is that sometimes we have more than one caption inside our observed area. We can see that more clearly if we turn on the debug mode on to check the root margins. Also, open your console and take a look into the entries being logged. If captions 1 and 2 are intersecting and you scroll up so that caption 2 leaves the observer, the log won’t say anything about caption 1. That is because our observer is not really keeping track of what’s intersecting at any given moment — it is just telling you when a caption enters or leaves its observed area. That’s how its callback function works. *Note: if you’re curious about how the debugger is working, expand the cell below. In this notebook it is making use of ObservableHQ reactive elements, but you can find a vanilla JS implementation in [this codepen](https://codepen.io/gianordoli/pen/YzGQEBJ).*`35:T4c7,basicStyles = () => html ` `36:T478,function markup(exampleName) { return html`

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi dui, pretium sit amet lectus a, consectetur venenatis ante.

Ut pellentesque, nibh eget pharetra scelerisque, quam mi molestie augue, sit amet faucibus felis enim et enim.

Sed consequat nisi congue porttitor tincidunt. Ut hendrerit, nulla nec lacinia ultrices, nisi ligula vehicula eros

` }37:[] 31:{"id":"41bb05f4c2355cbd","slug":"intersection-observer-tutorial-scrolling-slides","title":"Intersection Observer Tutorial #1: Scrolling Slides","thumbnail":"372c02815747ac762f1e775013f27553cddcc62b0b9b2c698fd46ecf62bff9bc","access_level":"public","create_time":"$D2021-03-22T15:25:22.142Z","update_time":"$D2021-03-29T21:05:22.704Z","view_time":null,"first_public_time":"$D2021-03-24T17:55:09.928Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"9db89550eb5ae0fc","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":"starter_2024","bio":""},"version":616,"publish_version":616,"role":null,"authored":false,"authors":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null,"bio":""}],"members":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Intersection Observer Tutorial #1: Scrolling Slides","cells":[{"id":39,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"example1 = html`\n${basicStyles()}\n\n\n\n${markup('example-1')}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof debug = Toggle({label: \"debug\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md `If you inspect the markup above you will see that each caption has a \\`data-index\\` attribute, which we will use to display the numbers on the background. Again, you could use a similar approach to send a hex color or an image url.\n\nAlso, note that we are setting the height of our frame to an arbitrary value with \\`--container-height: 500px\\`. That’s needed due to the nature of the ObservableHQ environment, but you could simply use \\`100vh\\` in a real implementation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md `### Implementation\nThere is nothing that much different from what we have seen on [part 1](https://observablehq.com/@gianordoli/intersection-observer-tutorial) here. We are using the intersection observer to toggle a class on the captions, plus using its \\`data-index\\` attribute to dysplay the number on the pink rectangle.\n\n*Note: our \\`rootMarginExample1\\` is being defined as a separate variable so that the \\`.io-debugger\\` element can make use of it.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"rootMarginExample1 = { return `0px 0px -20% 0px`};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md `And let’s create this \\`setupObserver\\` function in a way that can handle different \\`root\\` and \\`rootMargin\\` parameters, so we can reuse it later.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"setupObserver = (root, rootMargin) => {\n const elements = [...root.querySelectorAll('.caption')];\n const background = root.querySelector('.background > p');\n \n function observerCallback(entries, observer) {\n entries.forEach(entry => {\n console.log(entry.target);\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n background.innerHTML = entry.target.getAttribute('data-index');\n } else {\n entry.target.classList.remove('active');\n }\n })\n } \n \n const options = {\n root,\n rootMargin,\n };\n const observer = new IntersectionObserver(observerCallback, options);\n \n elements.forEach(el => observer.observe(el));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"setupObserver(example1.querySelector('.frame'), rootMarginExample1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"ioDebuggerStyle = (rootMargin) => {\n const margins = 'top,right,bottom,left'.split(',')\n .reduce((acc, curr, i) => {\n acc[curr] = rootMargin.split(' ')[i];\n return acc;\n }, {})\n return `\n top: calc(${margins.top} * -1);\n left: calc(${margins.left} * -1);\n width: calc(100% + (${margins.left}) + (${margins.right}));\n height: calc(100% + (${margins.top}) + (${margins.bottom}));\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md `\n## The Solution\n\nAn easy solution to the problem above is to tweak the spacing between each caption so that there are never two at the same time inside the \\`rootMargin\\` area. Move the sliders below to tweak the captions’ \\`margin-bottom\\` and the bottom value of your \\`rootMargin\\`. You will notice that the sweetspot is the point where the space between the captions is the same as the height observed by your IO.\n\nFor example, if you have a \\`-20%\\` bottom value for \\`rootMargin\\`, the space between your captions needs to be at least \\`80%\\` of the frame (in this case, our \\`div.frame\\`, but you could just use \\`80vh\\` on a regular viewport-based example).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"viewof marginBottom = Range([0, 100], {value: 100, step: 5, label: \"Caption margin-bottom (in % of frame-height)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"viewof rootMarginBottom = Range([-100, 0], {value: -20, step: 5, label: \"rootMargin bottom\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"example2 = html`\n${basicStyles()}\n\n\n\n${markup('example-2')}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"bind(Toggle({label: \"debug\", value: false}), viewof debug)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"rootMarginExample2 = { return `0px 0px ${Math.round(rootMarginBottom)}% 0px`}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"setupObserver(example2.querySelector('.frame'), rootMarginExample2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"md `### Styles and Markup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"md `### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"import {Toggle, Range, bind, html} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"html`\n

Notebook’s Inline Styles

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 32:"$31:body"