html - CSS 滚动填充顶部在 Safari 中不起作用

Question

根据 caniuse.com，scroll-padding-top property is supported in the latest version of Safari ，但它根本不适合我。我设置了一个 reduced example Code Pen here确认它没有任何其他问题，即使只有 CSS 和 HTML，它似乎也不起作用。这是 CSS:

html {
      scroll-behavior: smooth;
      scroll-padding-top: 152px;
}

我可以确认我的 Safari 版本是 13.0.1，并且根据 caniuse.com 的说法，对这个属性的支持是在 11.0 中实现的。

它在 Firefox 和 Chrome 中都按预期工作。

是否有任何我遗漏的东西需要包含在内才能在 Safari 中运行？我想尽可能避免使用 jquery 和 javascript，但如果这是唯一的方法，我愿意使用它们来实现解决方案。

Answer 1

scroll-padding 属性是 CSS Scroll Snap Module 的一部分.最recent update该模块声明 scroll-padding 应该适用于所有滚动容器。然而，滚动填充的原始规范要求它只能与 滚动快照容器 一起使用，这是当前在 Safari 中实现的(因此，caniuse 将其列为受支持的原因)。 Safari 的新规范开发尚未开始(请参阅 WebKit bug)。

但是，在链接到页面上的元素时，您实际上并不需要滚动填充来实现“偏移”。相反，您可以只将 padding-top 应用于链接元素，然后为 margin-top 应用相应的负值，这样布局就不会发生变化。

html {
  scroll-behavior: smooth;
}

.glossary {
  margin-bottom: 100px;
}

.glossary__link {
  padding: 10px;
}

h3 {
  padding-top: 152px;
  margin-top: -152px;
}

<div class="glossary">
  <a href="#a" class="glossary__link">A</a>
  <a href="#b" class="glossary__link">B</a>
  <a href="#c" class="glossary__link">C</a>
  <a href="#d" class="glossary__link">D</a>
</div>

<hr>
<section>
  <h3 id="a">A</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>

<hr>
<section>
  <h3 id="b">B</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>

<hr>
<section>
  <h3 id="c">C</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>

<hr>
<section>
  <h3 id="d">D</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>