Safari中overflow-y:scroll与hidden问题：scroll致div底部额外空白

嘿，这个Safari的专属坑我之前也踩过好几次！给你几个经过验证的解决方案，你可以根据自己的场景挨个尝试：

• 给滚动容器明确设置高度约束
  Safari在处理没有明确高度的滚动容器时，经常会出现高度计算错误，导致容器被不必要地撑开。你可以给目标div设置固定height或者max-height，同时确保它的父元素也有确定的高度（比如height: 100%或者具体数值）。示例代码：

  .your-scroll-div {
    overflow-y: scroll;
    max-height: 500px; /* 根据你的布局调整数值 */
    height: 100%; /* 如果父元素有确定高度的话，这个属性可以让容器占满父元素高度 */
  }
  

• flex布局下添加min-height:0
  如果你的滚动div是在flex容器中，Safari的flex布局对滚动容器的处理有特殊的坑——它会忽略overflow属性，让容器被内容撑开。这时候给滚动容器加上min-height: 0就能强制它遵守高度约束：

  .flex-parent-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 给flex父元素一个确定的高度，比如占满视口 */
  }
  .your-scroll-div {
    overflow-y: scroll;
    flex: 1; /* 让容器占满父元素剩余空间 */
    min-height: 0; /* 关键属性，解决Safari的计算错误 */
  }
  

• 调整-webkit-overflow-scrolling属性
  很多人为了让Safari的滚动更流畅，会加-webkit-overflow-scrolling: touch;，但这个属性有时候会导致容器高度计算异常。你可以尝试把它改成auto或者直接移除，看看空白是否消失：

  .your-scroll-div {
    overflow-y: scroll;
    -webkit-overflow-scrolling: auto; /* 替换touch，或者直接删掉这行 */
  }
  

• 检查内部元素的margin-bottom
  有时候滚动容器底部的空白并不是容器本身的问题，而是内部最后一个元素的margin-bottom被Safari错误地计算到了容器外部。你可以直接移除最后一个元素的margin，或者给容器加padding-bottom来抵消：

  .your-scroll-div {
    overflow-y: scroll;
    padding-bottom: 15px; /* 数值和内部元素的margin-bottom一致即可 */
  }
  .your-scroll-div > :last-child {
    margin-bottom: 0; /* 直接清除最后一个元素的底部外边距 */
  }
  

如果以上方法都没解决问题，你可以检查一下是否有其他CSS属性（比如transform、position: absolute）影响了容器的高度计算，Safari对这些属性的渲染逻辑和Chrome、Firefox确实有差异~

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