给大家整理了一些有关【HTML,CSS,IO】的项目学习资料（附讲解～～）：

 https://edu.51cto.com/course/33944.html

 https://edu.51cto.com/course/36086.html

如何在 iOS 中关闭弹性 CSS

如果你是开发者，特别是开发移动网页的开发者，你可能会遇到一个常见的问题：在 iOS 设备上的网页滚动时出现在边缘的弹性效果（即“过度滚动”效应）。这种效果可能会影响用户体验，特别是在一些应用中需要流畅的滚动效果。本文将详细介绍如何在 iOS 中关闭弹性 CSS 效果。

过程概述

首先，我们将整个过程分为几个步骤。以下是每一步的简单概述：

步骤描述
1创建 HTML 文件
2添加基本的 CSS 样式
3使用 JavaScript 关闭弹性效果
4测试和优化

步骤详解

步骤 1: 创建 HTML 文件

首先，你需要一个基本的 HTML 文件来进行测试。创建一个名为 index.html 的文件，并在其中添加以下代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关闭弹性 CSS 示例</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="container">
        欢迎来到关闭弹性滚动的示例
        <p>这是一段测试文本，随便你怎么滚动。</p>
        <p>在下面的文本框中输入内容，你将体验到没有弹性的滚动效果。</p>
        <textarea rows="10" cols="30"></textarea>
    </div>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 这段 HTML 代码创建了一个基本的网页结构，其中包含一个容器和一些文本。
步骤 2: 添加基本的 CSS 样式

接下来，我们需要为这个网页添加一些基本样式。在同一目录下创建一个名为 styles.css 的文件，并添加以下代码：

body {
    margin: 0;
    font-family: Arial, sans-serif;
    overflow: hidden; /* 隐藏默认滚动条 */
}

.container {
    height: 100vh; /* 让容器高度充满整个视窗 */
    overflow-y: scroll; /* 仅在容器内滚动 */
    -webkit-overflow-scrolling: touch; /* 启用原生滚动 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 这段 CSS 代码为网页设定了基本的样式，并隐藏了默认的滚动条。
步骤 3: 使用 JavaScript 关闭弹性效果

为了关闭 iOS 上的弹性滚动效果，我们将使用一些 JavaScript。在同一目录创建一个名为 script.js 的文件，并添加如下代码：

document.addEventListener('touchmove', function(event) {
    event.preventDefault(); // 阻止默认滚动行为
}, { passive: false });
  • 1.
  • 2.
  • 3.
  • 这段 JavaScript 代码将绑定一个事件监听器到整个文档上，来监听 touchmove 事件，并通过 event.preventDefault(); 来防止默认的滚动行为，从而关闭弹性效果。
步骤 4: 测试和优化

现在，一切都准备好了。打开你的浏览器，访问 index.html 文件，测试滚动效果。你应该会发现，在 iOS 设备上的滚动已经关闭了弹性效果。

文档 浏览器 用户 文档 浏览器 用户 打开网页 加载 HTML、CSS 和 JavaScript 渲染内容 滚动容器 执行 JS（preventDefault） 流畅滚动

结论

通过上述步骤，我们成功地关闭了 iOS 上的弹性 CSS 效果。你学习了如何设置基础的 HTML 和 CSS，同时使用 JavaScript 来处理触摸事件，从而有效地控制滚动行为。这样的技术在开发过程中是相当有用的，可以帮助改善用户体验。希望这篇文章能帮助你在未来的项目中更好地管理滚动效果。如果有任何疑问或需要进一步的帮助，请随时联系我。 Happy coding!