CSS中scroll-padding-top在Safari浏览器无效

Question

CSS中scroll-padding-top在Safari浏览器无效

7

根据caniuse.com的数据，scroll-padding-top属性在最新版的Safari中得到支持，但是它对我来说完全不起作用。我创建了一个简化的Code Pen示例，以确认没有其他东西干扰它，即使只有CSS和HTML也似乎不起作用。这是CSS代码：

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

我可以确认我的 Safari 版本是 13.0.1，根据 caniuse.com 的信息，该属性的支持在 11.0 版本中实现。

在 Firefox 和 Chrome 中都能正常工作。

是否有任何需要包含的内容，以便在 Safari 中正常工作？如果可能的话，我想避免使用 jquery 和 javascript，但如果这是唯一的方法，我愿意使用它们来实现解决方案。

- zolaDesigner

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Spencer Evison · Accepted Answer

scroll-padding属性是CSS滚动捕捉模块的一部分。该模块最近期更新规定，scroll-padding应该适用于所有滚动容器。然而，scroll-padding的原始规范要求仅与滚动捕捉容器一起使用，这就是Safari当前实现的内容（因此，为什么caniuse将其列为支持）。 Safari尚未开始新规范的开发（请参见WebKit bug）。

但是，实际上您不需要scroll-padding来在链接到页面上的元素时实现“偏移”。相反，您可以仅对链接的元素应用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>