本篇文章给大家带来的内容是关于CSS实现基于用户滚动应用（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
通过将当前滚动偏移映射到html元素上的属性，我们可以根据当前滚动位置设置页面上的元素样式。我们可以使用它来构建一个浮动导航组件。
这是我们将使用的HTML，
<header>I'm the page header</header> <p>Lot's of content here...</p> <p>More beautiful content...</p> <p>Content...</p>
首先，我们将监听该'scroll'事件，document并且scrollY每次用户滚动时我们都会请求当前位置。
document.addEventListener('scroll', () => {
document.documentElement.dataset.scroll = window.scrollY;
});
我们将滚动位置存储在html元素的数据属性中。如果您使用开发工具查看DOM，它将如下所示。
<html data-scroll="0">
现在我们可以使用此属性来设置页面上的元素样式。
/* 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);
}
基本上就是这样，当向下滚动时，标题现在将自动从页面中分离并浮动在内容之上。JavaScript代码并不关心这一点，它的任务就是将滚动偏移量放在数据属性中。这很好，因为JavaScript和CSS之间没有紧密耦合。
仍有一些改进，主要是在性能领域。
但首先，我们必须修复脚本，以适应页面加载时滚动位置不在顶部的情况。在这些情况下，标题将呈现错误。
页面加载时，我们必须快速获取当前滚动偏移量。这确保了我们始终与当前的事态同步。
// 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();
接下来我们将看一些性能改进。如果我们请求该scrollY位置，浏览器将必须计算页面上每个元素的位置，以确保它返回正确的位置。如果我们不强迫它每次滚动互动都这样做是最好的。
要做到这一点，我们需要一个debounce方法，这个方法会将我们的请求排队，直到浏览器准备好绘制下一帧，此时它已经计算了页面上所有元素的位置，所以它不会再来一遍。
// 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();
通过标记事件，passive我们可以告诉浏览器我们的滚动事件不会被触摸交互取消（例如与谷歌地图等插件交互时）。这允许浏览器立即滚动页面，因为它现在知道该事件不会被取消。
document.addEventListener('scroll', debounce(storeScroll), { passive: true });
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的CSS视频教程栏目！
Atas ialah kandungan terperinci CSS实现基于用户滚动应用（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Draggin ' dan Droppin ' dalam ReactApr 17, 2025 am 11:52 AMEkosistem React menawarkan kita banyak perpustakaan yang semuanya memberi tumpuan kepada interaksi seret dan penurunan. Kami mempunyai React-Dnd, React-Beautiful-Dnd,
Perisian CepatApr 17, 2025 am 11:49 AMTerdapat beberapa perkara yang saling berkaitan dengan perisian cepat sejak kebelakangan ini.
Kecerunan bersarang dengan klip latar belakangApr 17, 2025 am 11:47 AMSaya tidak boleh mengatakan saya menggunakan klip latar belakang semua yang kerap. Saya ' Tetapi saya diingatkan dalam jawatan oleh Stefan Judis,
Menggunakan RequestAnimationFrame dengan cangkuk ReactApr 17, 2025 am 11:46 AMAnimasi dengan RequestAnimationFrame semestinya mudah, tetapi jika anda belum membaca dokumentasi React dengan teliti maka anda mungkin akan mengalami beberapa perkara
Perlu tatal ke bahagian atas halaman?Apr 17, 2025 am 11:45 AMMungkin cara paling mudah untuk menawarkan kepada pengguna adalah pautan yang mensasarkan ID pada elemen. Begitu seperti ...
API terbaik (graphql) adalah salah satu yang anda tulisApr 17, 2025 am 11:36 AMDengar, saya bukan pakar GraphQL tetapi saya suka bekerja dengannya. Cara ia mendedahkan data kepada saya sebagai pemaju front-end cukup sejuk. Ia seperti menu
Berita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP BaruApr 17, 2025 am 11:26 AMPada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s
Pelbagai kaedah untuk mengembangkan kotak semasa memelihara jejari sempadanApr 17, 2025 am 11:19 AMSaya baru -baru ini melihat perubahan yang menarik pada Codepen: apabila melayang pena di laman web, ada persegi panjang dengan sudut bulat yang berkembang di belakang.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
Dreamweaver Mac版
Alat pembangunan web visual
