Хочу увеличить скорость вертикальной прокрутки, чтобы он непосредственно остановился на следующем div (открыто другое пр ⇐ Javascript

[Anonymous]

Медленная, постепенная вертикальная прокрутка: текущие обновления прокрутки в пикселе-пикселе и не прыгают или не прижимаются непосредственно к каждому разделу полного просмотра. Свойства не используются, поэтому браузер не автоматически выравнивает позиции прокрутки с границами раздела. < /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