我有这个代码：
<div style="height: calc(100vh - 200px); overflow: hidden auto;">
<div class="item">test</div>
<div class="item">test</div>
<div class="item">test</div>
<div class="item">test</div>
<div class="item">test</div>
<div class="item">test</div>
</div>字符串
元素滚动不仅适用于Safari移动的（IOS）。它看起来像溢出隐藏样式，但我检查了Safari，所有样式都像在其他设备中一样应用。所以一切都可能与风格好，但它不工作，我不知道为什么。
我尝试了很多CSS技巧来解决这个问题。
1条答案
按热度按时间x8goxv8g1#
如果元素滚动在Safari移动的版（iOS）中无法正常工作，则可能有几个常见原因导致此问题。以下是一些可能的解决方案和需要检查的事项：
1.查看Safari版本：确保您在iOS上的最新版本Safari上进行测试。较旧版本的Safari可能有bug或不支持某些CSS功能。
1.硬件加速：iOS上的Safari可能会对具有某些CSS属性的元素禁用硬件加速，从而导致滚动问题。要启用硬件加速，您可以尝试将以下CSS添加到滚动容器：
.scroll-container { transform：return（0，0，0）;}
1.触摸滚动：确保为元素启用了触摸滚动。默认情况下，触摸滚动应该工作，但如果有冲突的CSS样式或JavaScript事件干扰它，它可能无法按预期工作。
1.避免溢出剪裁：确保不存在具有溢出的父元素：隐藏的样式，可能是裁剪的滚动区域。检查.scroll-container的整个祖先链，确保它们都没有溢出：隐藏
1.检查JavaScript干扰：如果您有任何处理触摸或滚动事件的JavaScript代码，请确保它不会阻止默认行为或干扰滚动行为。
1.内容大小：确保.scroll-container中的内容足够大，可以滚动。如果内容的高度小于容器的高度，则不会触发滚动。
1.使用-webkit-overflow-scrolling：touch;：将以下CSS添加到.scroll-container中，以在Safari中启用平滑的触摸滚动：
.scroll-container { -webkit-overflow-scrolling：touch;}
1.其他器械测试：如果可能，请在其他iOS设备和浏览器上测试相同的代码，以检查该问题是否仅限于iOS上的Safari，或者是否是更普遍的问题。如果在尝试了这些解决方案后，滚动问题仍然存在，则可能是特定的样式组合或其他因素导致了该问题。在这种情况下，您可能需要进一步调查或考虑提供有关所使用的特定代码和样式的更多信息，以便进行更详细的分析。