CSS implementation based on user scrolling application (code)

The content this article brings to you is about CSS implementation of user-based scrolling applications (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

By mapping the current scroll offset to an attribute on an html element, we can style elements on the page based on the current scroll position. We can use this to build a floating navigation component.

This is the HTML we will be using, the

a nice component that we want to float on top of the content as we scroll down.

<header>I'm the page header</header>
<p>Lot's of content here...</p>
<p>More beautiful content...</p>
<p>Content...</p>

First, we will listen to the 'scroll' event, document and scrollY and we will request the current position every time the user scrolls.

document.addEventListener('scroll', () => {
  document.documentElement.dataset.scroll = window.scrollY;
});

We store the scroll position in the data attribute of the html element. If you use the development tools to view the DOM, it will look like this.

Now we can use this property to style elements on the page.

/* Make sure the header is always at least 3em high */
header {
  min-height: 3em;
  width: 100%;
  background-color: #fff;
}

/* Reserve the same height at the top of the page as the header min-height */
html:not([data-scroll='0']) body {
  padding-top: 3em;
}

/* Switch to fixed positioning, and stick the header to the top of the page */
html:not([data-scroll='0']) header {
  position: fixed;
  top: 0;
  z-index: 1;

  /* This box-shadow will help sell the floating effect */
  box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}

Basically that’s it, when scrolling down, the title will now automatically detach from the page and float above the content. The JavaScript code doesn't care about this, its job is to put the scroll offset in the data attribute. This is good because there is no tight coupling between JavaScript and CSS.

There are still some improvements, mainly in the performance area.

But first, we have to fix the script to accommodate the scroll position not being at the top when the page loads. In these cases, the title will render incorrectly.

When the page loads, we must quickly obtain the current scroll offset. This ensures that we are always in sync with the current state of affairs.

// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll events
document.addEventListener('scroll', storeScroll);

// Update scroll position for first time
storeScroll();

Next we will look at some performance improvements. If we request that scrollY position, the browser will have to calculate the position of every element on the page to ensure it returns the correct position. It would be best if we didn't force it to do this on every scroll interaction.

To do this, we need a debounce method, which will queue our request until the browser is ready to draw the next frame, at which point it has calculated the positions of all elements on the page, So it won't happen again.

// The debounce function receives our function as a parameter
const debounce = (fn) => {

  // This holds the requestAnimationFrame reference, so we can cancel it if we wish
  let frame;

  // The debounce function returns a new function that can receive a variable number of arguments
  return (...params) => {
    
    // If the frame variable has been defined, clear it now, and queue for next frame
    if (frame) { 
      cancelAnimationFrame(frame);
    }

    // Queue our function call for the next frame
    frame = requestAnimationFrame(() => {
      
      // Call our function and pass any params we received
      fn(...params);
    });

  } 
};

// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener('scroll', debounce(storeScroll));

// Update scroll position for first time
storeScroll();

By marking events passively we can tell the browser that our scroll events will not be canceled by touch interactions (such as when interacting with plugins such as Google Maps). This allows the browser to scroll the page immediately because it now knows that the event will not be canceled.

document.addEventListener('scroll', debounce(storeScroll), { passive: true });

This article has ended here. For more other exciting content, you can pay attention to the CSS Video Tutorial column of the PHP Chinese website!

The above is the detailed content of CSS implementation based on user scrolling application (code). For more information, please follow other related articles on the PHP Chinese website!