CSS 如何在iOS和Android上阻止文档滚动，但允许网站内部div元素滚动

在本文中，我们将介绍如何通过CSS实现在iOS和Android上阻止整个文档滚动，但允许网站内部的div元素进行滚动。

阅读更多：CSS 教程

使用overflow属性

CSS的overflow属性可以控制元素的溢出内容如何处理。我们可以利用这个属性来实现滚动效果。

例如，我们有一个包含内容的div元素，当内容超出div的大小时，我们希望其显示滚动条，而不是整个网页滚动。

div {
  overflow: auto;
}

这将在div元素的内容溢出时显示滚动条，并限制滚动的范围为div本身。

阻止文档滚动

阻止整个文档的滚动，我们可以使用overflow属性的另一个值：hidden。将该值应用于body元素可以有效地阻止iOS和Android上的文档滚动。

body {
  overflow: hidden;
}

这样一来，无论用户如何尝试滚动页面，文档都不会滚动。

允许div元素滚动

为了允许div元素内部的内容滚动，我们需要将overflow属性应用于该特定的div元素，并设置合适的高度。

div.scrollable {
  overflow: auto;
  height: 200px; /* 设置合适的高度，使内容超出div时显示滚动条 */
}

在上述示例中，我们给特定的div元素添加了一个类名scrollable，并将overflow属性设置为auto，这样当内容超出div的高度时，将自动显示滚动条。

兼容iOS和Android

尽管上述方法在大多数情况下适用于iOS和Android设备，但在某些情况下可能会遇到兼容性问题。为了最大程度地确保兼容性，我们可以同时在html和body元素上应用overflow: hidden来阻止文档滚动。

html, body {
  overflow: hidden;
}

然后，在需要允许滚动的div元素上使用overflow: auto，如前面所示。

div.scrollable {
  overflow: auto;
  height: 200px; /* 设置合适的高度，使内容超出div时显示滚动条 */
}

这样一来，无论是iOS还是Android设备，都会正确地阻止文档滚动，并允许内部div元素的滚动。

总结

通过使用CSS的overflow属性，我们可以实现在iOS和Android上阻止整个文档的滚动，但允许网站内部的div元素进行滚动。通过将overflow: hidden应用于body元素，可以阻止文档滚动，然后使用overflow: auto在需要滚动的div元素上允许滚动。为了最大程度地确保兼容性，可以同时在html和body元素上设置阻止滚动的样式。