Chrome中自定义webkit滚动条结合scroll-snap-type的滚动跳转异常问题

我在项目中使用了scroll-snap-type: y mandatory属性，并通过以下CSS自定义WebKit滚动条：

::-webkit-scrollbar {
  width: 12px;
  background: transparent;
}
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
  background-color: #e0b078;
}

该功能在Microsoft Edge浏览器中运行正常，但仅在Chrome浏览器中出现问题：点击滚动条轨道的空白区域时，本该滚动到点击位置或逐步滚动，实际却直接跳转到页面的页眉或页脚。我已创建在线示例复现该问题，目前尚未找到解决方案，特此求助。

内容的提问来源于stack exchange，提问作者Mehdi Rafiee