Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use css to achieve user-based scrolling applications, the article is very detailed, has a certain reference value, interested friends must read it!

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

This is the HTML we will use, and as we scroll down, we want a good component to float on top of the content.

I'mthepageheader

Lot'sofcontenthere...

Morebeautifulcontent...

Content...

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

Document.addEventListener ('scroll', ()) = > {

Document.documentElement.dataset.scroll=window.scrollY

})

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

We can now use this property to style the elements on the page.

/ * Makesuretheheaderisalwaysatleast3emhigh*/

Header {

Min-height:3em

Width:100%

Background-color:#fff

}

/ * Reservethesameheightatthetopofthepageastheheadermin-height*/

Html:not ([data-scroll='0']) body {

Padding-top:3em

}

/ * Switchtofixedpositioning,andsticktheheadertothetopofthepage*/

Html:not ([data-scroll='0']) header {

Position:fixed

Top:0

Z-index:1

/ * Thisbox-shadowwillhelpsellthefloatingeffect*/

Box-shadow:00.5emrgba (0pr 0pl 0.5)

}

Basically, when you scroll down, the title will now automatically detach from the page and float on top of the content. The JavaScript code doesn't care about this; its job is to put the scroll offset in the data property. This is good because there is no tight coupling between JavaScript and CSS.

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

But first, we must fix the script to accommodate situations where the scrolling position is not at the top when the page is loaded. In these cases, the title will present an error.

When the page loads, we must quickly get the current scroll offset. This ensures that we are always in sync with the current situation.

/ / Readsoutthescrollpositionandstoresitinthedataattribute

/ / sowecanuseitinourstylesheets

ConststoreScroll= () = > {

Document.documentElement.dataset.scroll=window.scrollY

}

/ / Listenfornewscrollevents

Document.addEventListener ('scroll',storeScroll)

/ / Updatescrollpositionforfirsttime

StoreScroll ()

Next we will look at some performance improvements. If we request the scrollY location, the browser will have to calculate the location of each element on the page to ensure that it returns to the correct location. It's best if we don't force it to do this every time it scrolls.

To do this, we need a debounce method that queues our request until the browser is ready to draw the next frame, and it has calculated the location of all the elements on the page, so it won't do it again.

/ / Thedebouncefunctionreceivesourfunctionasaparameter

Constdebounce= (fn) = > {

/ / ThisholdstherequestAnimationFramereference,sowecancancelitifwewish

Letframe

/ / Thedebouncefunctionreturnsanewfunctionthatcanreceiveavariablenumberofarguments

Return (... params) = > {

/ / Iftheframevariablehasbeendefined,clearitnow,andqueuefornextframe

If (frame) {

CancelAnimationFrame (frame)

}

/ / Queueourfunctioncallforthenextframe

Frame=requestAnimationFrame () = > {

/ / Callourfunctionandpassanyparamswereceived

Fn (. Params)

})

}

}

/ / Readsoutthescrollpositionandstoresitinthedataattribute

/ / sowecanuseitinourstylesheets

ConststoreScroll= () = > {

Document.documentElement.dataset.scroll=window.scrollY

}

/ / Listenfornewscrollevents, hereafter wedebounceour`storeScroll`function

Document.addEventListener ('scroll',debounce (storeScroll))

/ / Updatescrollpositionforfirsttime

StoreScroll ()

By marking events, passive can tell browsers that our scrolling events will not be canceled by touch interaction (for example, when interacting with plug-ins 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})

The above is all the content of the article "how to use css to implement user-based scrolling applications". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.