我正在尝试在我的网站上实现滚动捕捉效果，以便当用户滚动时每个部分都会捕捉到视图中。当我使用鼠标滚轮时，它工作得很好（工作 1 次到 5 次...），但当我在触摸板上使用两根手指滚动时，它不能一致地工作。页面不会捕捉到下一部分，而是平滑滚动并绕过捕捉效果。
<div class="scroll-container">
<section class="step">
<div>
<div>
<div class="menu-container">
<button>Contact</button>
<button>Resume</button>
<button>About</button>
<button>Certificate</button>
<button>Project</button>
</div>
</div>
<div>
<div class="icon-container">
<img src="./public/ICON.png" alt="icon" class="img-icon" />
</div>
</div>
</div>
<div class="group">
<div class="animated-background"></div>
<div class="animated-background-solid"></div>
<div class="size-slot-container">
<div class="slot-container">
<div class="intro">
<p class="greeting">Hey 👋</p>
<h1 class="name">I'm MisTrale 🦅</h1>
<h2 class="role">FullStack Developer <span style="color: red;">Engineer</span></h2>
<p class="description">
I want to be a <span style="color: red;"> Full-Stack </span> Developer specializing in <span style="color: blue;">front-end</span>, <span style="color: blue;">back-end</span>, and <span style="color: blue;"> mobile </span> development using Flutter.
I am passionate about creating seamless and efficient applications that provide real value.
Actively seeking opportunities to leverage my skills in meaningful projects and contribute to the growth of the tech industry.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="step">
<div class="aboutme">
<p>ABOUT ME</p>
</div>
</section>
<section class="step">
<div class="aboutme">
<p>NotMe</p>
</div>
</section>
还有我的CSS：
body {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
height: 100vh;
min-height: 100vh;
overflow: hidden;
scroll-behavior: smooth;
color-scheme: light dark;
background-image: radial-gradient(at center, #0d1d31 0%, #0c0d13 100%);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.scroll-container {
height: 100vh; /* Full viewport height for the container */
overflow-y: scroll; /* Enables vertical scrolling */
scroll-snap-type: y mandatory; /* Each section snaps to the viewport */
-ms-overflow-style: none; /* Hides scrollbar on Internet Explorer and Edge */
-webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS */
scrollbar-width: none; /* Hides scrollbar on Firefox */
}
.step {
height: 100vh; /* Full viewport height for each section */
scroll-snap-align: start; /* Each section snaps to the start */
}
/* Hide scroll bar specifically for the container */
.scroll-container::-webkit-scrollbar {
display: none; /* Hides scrollbar on WebKit browsers */
}
谢谢！ ;)
这是一个基于您的代码的可运行片段，但我无法发现问题。 Scroll-snap 非常适合我，在 Mac 上用两根手指滚动。
body {
margin: 0;
font-family: sans-serif;
line-height: 1.5;
font-weight: 400;
height: 100vh;
min-height: 100vh;
overflow: hidden;
scroll-behavior: smooth;
}
.scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
}
.step {
min-height: 100vh;
scroll-snap-align: start;
padding: 1px 1em;
box-sizing: border-box;
}
.step1 {
background: cyan;
}
.step2 {
background: blue;
color: white;
}
.step3 {
background: lime;
}<div class="scroll-container">
<section class="step step1">
<p>
Sed sed cursus leo. Nam molestie eleifend leo, nec fermentum risus maximus ac. Pellentesque eget placerat ipsum. Vestibulum tempor quam justo. Fusce dapibus turpis non ante faucibus suscipit. Fusce rhoncus eleifend ipsum et lacinia. Curabitur nec congue arcu. Mauris dignissim magna ligula. Nullam ultrices, metus sit amet ultrices porttitor, turpis ligula interdum enim, eu pellentesque purus quam ut arcu. Nullam aliquet vitae tortor vel tincidunt. Fusce maximus lacus diam, sed elementum ligula condimentum vel. Sed consequat orci ac nunc gravida, at accumsan magna porttitor.
</p>
<p>
Mauris vulputate quam ac purus laoreet, nec ultrices eros placerat. Fusce id nisi ex. Nunc ornare tellus nisl, suscipit fermentum quam sodales sit amet. Ut ex magna, tempor nec ex sed, ornare ornare sem. Proin gravida turpis urna, vitae posuere purus consequat sit amet. Donec laoreet tempor massa. Praesent porta mauris vitae neque condimentum, non volutpat felis eleifend.
</p>
<p>
Aliquam aliquam a est eget cursus. Ut eu tempus justo, rutrum dapibus ex. In hac habitasse platea dictumst. Nulla ornare nisi sit amet arcu semper maximus. Praesent eu augue eget mi sodales sodales. Praesent sodales neque malesuada, euismod est in, lobortis turpis. Nam blandit facilisis mauris. Ut ac ex rhoncus, ornare velit ac, aliquam nibh. Quisque euismod mauris quis nisl consectetur vulputate. Pellentesque mattis, tellus ut dictum dictum, urna ligula sodales magna, euismod malesuada ipsum quam nec elit.
</p>
</section>
<section class="step step2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.
</p>
<p>
Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</section>
<section class="step step3">
<p>
Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.
</p>
<p>
Curabitur eget ullamcorper justo, sit amet dictum neque. Fusce vitae ligula et felis auctor vulputate vel suscipit nibh. Integer a felis varius purus vestibulum viverra. Morbi venenatis placerat augue sit amet commodo. Sed dapibus molestie eros, vitae ultrices nunc commodo aliquam. Vivamus tempus mollis massa vel egestas. Donec ut ante quis eros commodo volutpat. Proin sem nisi, viverra ac sem tristique, consectetur laoreet sapien. Vivamus suscipit orci vel euismod scelerisque. Nullam sed pulvinar tellus. Nullam pulvinar arcu eget nibh rutrum, eget faucibus ligula ullamcorper.
</p>
</section>