如何使溢出自动在 Safari 上工作

Posted 2023-03-05

【中文标题】如何使溢出自动在 Safari 上工作

【英文标题】：How to make overflow auto working on Safari

【发布时间】：2017-12-22 22:18:01

【问题描述】：

我尝试了许多浏览器，Firefox、Safari、IE10、android 设备，都运行良好。但是当它变成 ios 设备时，比如 iPad、iPhone，溢出就不起作用了。

.card.with-scroll .card-body 
  height: calc(100% - 44px);
  overflow-y: auto;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;

【参考方案1】：

只需在属性前添加 -wekit- 即可使其在 safari 中运行..！

.card.with-scroll .card-body 
  height: calc(100% - 44px);
  -webkit-overflow-y: auto; /* added css prefix for safari */
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;

【参考方案2】：

-webkit-overflow-scrolling: 触摸；

如果这不起作用，则应用于父元素。对我来说，它奏效了。

【参考方案3】：

溢出：自动；和溢出：滚动；似乎在 iOS 和 OS X 上的工作方式不同。 尝试使用溢出：滚动；加上-webkit-overflow-scrolling：触摸；在 iOS 和 OS X 上。