滚动捕捉中断平滑滚动

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>