滾動捕捉中斷平滑滾動

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>