滚动捕捉中断平滑滚动

Question

当您单击链接时，我正在尝试使用滚动捕捉以及平滑滚动来制作页面，但滚动捕捉似乎破坏了平滑滚动。 在 iOS 上它完全断开链接，在桌面上它只是断开平滑滚动。 我怎样才能解决这个问题？

 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

我建议添加到 CSS，在html标签scroll-behavior: smooth应该好得多；-) 它在编辑器（VSCode + LiveServer）中看起来肯定比这里更好。 我希望你会满意。最好的问候 ;-)

 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>