滚动捕捉中断平滑滚动

Question

I am trying to make a page with scroll snap as well as smooth scrolling when you click on a link but scroll snap seems to break smooth scrolling. On iOS it breaks the links completely and on desktop it just breaks the smooth scrolling. How can I get around this?

 var root = $('html, body'); $('a[href^="#"]').click(function() { root.animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 1000); return false; });

 html { grid-auto-flow: row; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; } section { min-height: 80vh; scroll-snap-align: start; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section id="1"> Section 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section> <a href="#1">Go to 1</a> <a href="#2">Go to 2</a> <a href="#3">Go to 3</a> <a href="#4">Go to 4</a> <a href="#5">Go to 5</a> <a href="#6">Go to 6</a> <section id="2"> Section 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section> <section id="3"> Section 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section> <section id="4"> Section 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section> <section id="5"> Section 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section> <section id="6"> Section 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section>

Answer 1

I suggest adding to CSS,in html tag scroll-behavior: smooth It should be much better ;-) It looks definitely better in the editor(VSCode+LiveServer) than here. I hope You will be content.Best regards ;-)

 var root = $('html, body'); $('a[href^="#"]').click(function() { root.animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 1000); return false; });

 html { grid-auto-flow: row; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; scroll-behavior: smooth; } section { min-height: 80vh; scroll-snap-align: start; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section id="1"> Section 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section> <a href="#1">Go to 1</a> <a href="#2">Go to 2</a> <a href="#3">Go to 3</a> <a href="#4">Go to 4</a> <a href="#5">Go to 5</a> <a href="#6">Go to 6</a> <section id="2"> Section 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section> <section id="3"> Section 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section> <section id="4"> Section 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section> <section id="5"> Section 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section> <section id="6"> Section 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin. Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at, gravida nisi. </section>