一个页面实现两个滚动条【前端】

前言

2024-4-2 12:54:46

以下内容源自《【前端】》
仅供学习交流使用

版权

禁止其他平台发布时删除以下此话
本文首次发布于CSDN平台
作者是CSDN@日星月云
博客主页是https://jsss-1.blog.csdn.net
禁止其他平台发布时删除以上此话

推荐

前端学习——css屏幕的两个部分分别有滚轮滑动

一个页面实现两个滚动条

<!DOCTYPE html>
<html lang="zh-CN">
	<head>

		<title>测试</title>

	</head>
	<style>


		html,body{
            overflow-y: hidden; /*整体不动*/
        }

        .container {
            display: flex;
            flex-direction: row;
            overflow-y: hidden; /*整体不动*/

        }

        .content {
            width: 75%;
            margin-left: 45px;
            margin-top: 10px;
            height: 400px; /*设置高度，等高*/
            overflow-y: scroll;
        }

        .sidebar {
            display: flex;
            width: 25%;
            height: 400px; /*设置高度，等高*/
            overflow-y: auto;
        }
	</style>

	<body>

		<div class="container">
			<div class="sidebar">
				<div class="tag-list" id="tag">

				</div>

			</div>

			<div class="content">
				<div class="message-container" id="message">

					<div class="conversation-list">


					</div>
				</div>
			</div>

		</div>

	</body>

	<script>
        // 获取具有id为“tag”的元素
        const tagList = document.getElementById('tag');

        // 循环十次
        for (let i = 0; i < 50; i++) {
            const tagElement = document.createElement('div');
            tagElement.textContent = 'tag'+i;
            tagList.appendChild(tagElement);
        }


        // 获取具有id为“tag”的元素
        const messageList = document.getElementById('message');

        // 循环十次
        for (let i = 0; i < 50; i++) {
            const messageElement = document.createElement('div');
            messageElement.textContent =  'message'+i;
            messageList.appendChild(messageElement);
        }

	</script>

</html>

在这里插入图片描述

最后

2024-4-2 12:55:30

迎着日光月光星光，直面风霜雨霜雪霜。

# 前端
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

1747张YOLO标注奶牛水牛识别数据集：精准标注跨场景动物检测模型训练专用计算机视觉数据集，助力智慧农业与畜牧业AI算法研发

avatar 讯飞AI开发者社区
cover

YOLOv8【卷积创新篇·第25节】Capsule Network胶囊卷积网络：让检测器拥有“空间想象力”！

avatar 讯飞AI开发者社区

机器学习与人工智能

python# 创建基类# 定义一对多关系# 定义多对一关系# 定义多对多关系（通过关联表）# 关联表（用于多对多关系）SQLAlchemy ORM提供了强大而灵活的数据库操作方式，通过本文的介绍，您应该能够：安装和配置SQLAlchemy定义数据模型和关系执行基本的CRUD操作构建复杂查询管理数据库事务遵循最佳实践SQLAlchemy还有更多高级特性，如混合属性、事件监听、自定义查询等，值得进一

avatar 讯飞AI开发者社区