网站详情页内容折叠之方法二：滚动折叠

拼才会有未来

于 2023-12-14 15:39:06 发布

阅读量1.5k

点赞数 39

分类专栏：前端/css/html/js 文章标签： java 前端

本文链接：https://blog.csdn.net/QQ183718318/article/details/134994573

版权

前端/css/html/js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

上次写过一篇：网站页面内容折叠和收起怎么弄（手把手教你制作内容折叠和收起），有提到过滚动折叠内容，本次本文将介绍通过鼠标滚动滑轮事件实现内容折叠和收起。

滚动折叠说明

在网站详情页中，往往会包含大量的文本内容，如果全部显示出来，会导致页面加载缓慢，影响用户体验。因此，可以使用内容折叠的方式，将内容分为可折叠和不可折叠两部分。

内容折叠的方式常见有两种，其中一种是滚动折叠。滚动折叠是指，当用户滚动到一定位置时，剩余内容会自动折叠起来。这种方式的优点是，用户可以根据自己的需要来查看内容，不会影响页面加载速度。

要实现滚动折叠，需要使用鼠标滚轮事件。在鼠标滚轮滚动时，可以获取鼠标滚轮滚动的距离。如果距离为负，则表示用户正在向上滚动，需要折叠剩余内容；如果距离为正，则表示用户正在向下滚动，需要展开剩余内容。

以下是一个简单的滚动折叠实现示例：

<html lang="zh-CN">
<head>
  <title>滚动折叠</title>
</head>
<body>
<!--
  定义一个 `div` 元素，用于存储折叠内容。
  元素的高度为 500px，并设置为 `overflow: auto`，以便当内容高度超过 500px 时，可以自动滚动。
-->
  <div class="fold-content" style="height: 500px; overflow: auto;">
    <p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
	<p>这段文字将会被折叠</p>
  </div>

  <script>
    // 定义一个变量，用于存储 `.fold-content` 元素
	var foldContent = document.querySelector(".fold-content");

	// 注册鼠标滚轮事件
	// 当鼠标滚轮滚动时，会触发 `onWheel()` 函数
	foldContent.addEventListener("wheel", onWheel);

	// 定义一个函数，用于处理鼠标滚轮事件
	function onWheel(event) {

	  // 获取鼠标滚轮滚动的距离
	  // `event.deltaY` 的值为正表示鼠标向上滚动，为负表示鼠标向下滚动
	  var delta = event.deltaY;

	  // 获取 `.fold-content` 元素的高度
	  // `scrollHeight` 属性返回元素的实际高度
	  var height = foldContent.scrollHeight;

	  // 设置 `.fold-content` 元素的高度
	  // 如果鼠标向上滚动，则将元素的高度设置为 500px
	  // 如果鼠标向下滚动，则将元素的高度设置为 500px - deltaY
	  if (delta < 0) {
		foldContent.style.height = "500px";
	  } else {
		foldContent.style.height = "500px - deltaY";
	  }
	}

  </script>
</body>
</html>

通过这个简单的示例，我们看到这个滚动折叠方法是比较简单易懂的，就算是新手也能一看就会。《江湖简称：有手就行》

下面通过实例操作，一起看看效果是怎样的吧！

实例应用

我们只需要将class类名与script中定义变量相同，用于存储neirong元素。
如图：

1.将内容区域的div calss类名复制到script代码中修改。

比如：我的class类名是neirong。

哪么将var foldContent = document.querySelector(".fold-content");中的.fold-content修改为.neirong。

修改后为var foldContent = document.querySelector(".neirong");

其次是在div中添加行内样式，高度500px，超过500px将隐藏，样式：style="height: 500px; overflow: auto;"

最终修改为：<div class="neirong fs-5 fw-semibold text-gray-600" style="height: 500px; overflow: auto;">

注意：class类名需要根据自行的类名而修改。

2.首先将script代码复制到内容模板中，放在内容div区域下方。
如图：
实测代码页面
代码：

<script>
var foldContent = document.querySelector(".neirong");
  foldContent.addEventListener("wheel", onWheel);
  function onWheel(event) {
    var delta = event.deltaY;
    var height = foldContent.scrollHeight;
    if (delta < 0) {
      foldContent.style.height = "500px";
    } else {
      foldContent.style.height = "500px - deltaY";
    }
  }
</script>

注意：显示文章篇幅高度只需要修改两处地方即可：如：
1、style="height: 500px; overflow: auto;"
2、if (delta < 0) { foldContent.style.height = "500px"; } else { foldContent.style.height = "500px - deltaY"; }
将500px修改为你想设定的高度px即可。