Медленная, постепенная вертикальная прокрутка: текущие обновления прокрутки в пикселе-пикселе и не прыгают или не прижимаются непосредственно к каждому разделу полного просмотра. Свойства не используются, поэтому браузер не автоматически выравнивает позиции прокрутки с границами раздела. < /p>
Нет логики Snap in javaScript: проводник колеса увеличивает постепенное прокручивание без закругления или перепрыгивания до самого существующего. Ожидается. < /p>
Get Comprehensive Subject-Wise CSVTU Notes Instantly
Prepare Better with Quality Material
CSVTU Study Hub
Smarter Learning, Better Scores
Designed for CSVTU Students
const containerRef = useRef(null);
useEffect(() => {
const container = containerRef.current;
const onWheel = (evt) => {
console.log("ahrsh")
// Trigger only if event target is container or any of its descendants
if (container.contains(evt.target)) {
evt.preventDefault();
container.scrollTop += evt.deltaY * 10; // increase vertical scroll speed
console.log("harsh");
}
};
container.addEventListener("wheel", onWheel, { passive: false });
return () => {
container.removeEventListener("wheel", onWheel);
};
}, []);
const StickyContainer = styled.div`
position: relative;
height: 330vh;
display: flex;
align-items: flex-start; /* important for sticky to work */
justify-content: space-around;
border: 3px solid #97c52c;
scroll-snap-align: start;
scroll-behavior: smooth;
`;
const TextContainer = styled.div`
scroll-behavior: smooth;
width: 45vw;
`;
const TextBlock = styled.div`
color: white;
height: 100vh;
box-sizing: border-box;
margin-bottom: 60px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
gap: 20px;
animation: appear linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
`;
const StickyImage = styled.img`
position: sticky;
top: 40px;
height: 700px;
align-self: flex-start;
object-fit: contain;
`;
< /code>
Быстрая, точная вертикальная прокрутка, которая прыгает или сжимает непосредственно к следующему разделам полного просмотра на каждом вводе прокрутки, улучшении навигации и пользовательском опыте. < /p>
Нет замораживания или застрявшего поведения при пансии или скручивании внутри контейнера или его детских элементов, обеспечивающих плавное и непреустройство. Таким образом, браузер автоматически выравнивает позиции прокрутки с точностью точных границ раздела, обеспечивая естественную прокрутку в разделе. ожидается.
Подробнее здесь: https://stackoverflow.com/questions/797 ... iv-open-of
