js 固定左侧 右侧滚动
在网页设计中，实现左侧固定、右侧可滚动的效果通常通过CSS来完成。这种布局方式在很多场景下都非常有用，比如导航栏、侧边栏等需要固定在页面某一侧，而内容区域可以滚动浏览。
基本概念
- 固定定位（Fixed Positioning）：元素的位置相对于浏览器窗口固定，即使页面滚动，元素位置也不会改变。
- 相对定位（Relative Positioning）：元素的位置相对于其正常位置进行定位，可以通过
top、right、bottom、left属性来调整位置。
实现方法
以下是一个简单的示例代码，展示如何实现左侧固定、右侧可滚动的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Left, Scrollable Right</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
}
.sidebar {
width: 250px;
background-color: #333;
color: white;
padding: 20px;
position: fixed;
height: 100vh; /* 视口高度 */
overflow-y: auto; /* 如果内容超出视口高度，允许滚动 */
}
.content {
margin-left: 250px; /* 与侧边栏宽度相同 */
padding: 20px;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<h2>Sidebar</h2>
<p>Some sidebar content...</p>
<!-- 更多内容 -->
</div>
<div class="content">
<h1>Content Area</h1>
<p>Some content here...</p>
<!-- 更多内容 -->
</div>
</div>
</body>
</html>优势
- 用户体验：用户可以在滚动内容的同时，始终能看到侧边栏中的导航或重要信息。
- 页面布局：这种布局方式使得页面结构更加清晰，便于管理和维护。
应用场景
- 导航网站：侧边栏通常用于放置导航菜单。
- 管理后台：侧边栏可以放置用户信息、功能模块等。
- 博客文章：侧边栏可以放置作者简介、相关文章链接等。
可能遇到的问题及解决方法
- 内容溢出：如果侧边栏内容过多，可能会超出视口高度。可以通过设置
overflow-y: auto;来允许侧边栏内部滚动。 - 响应式设计：在不同设备上，侧边栏可能需要调整宽度或隐藏。可以使用媒体查询（Media Queries）来实现响应式设计。
@media (max-width: 768px) {
.sidebar {
width: 100%;
position: relative;
}
.content {
margin-left: 0;
}
}通过以上方法，可以实现左侧固定、右侧可滚动的布局，并且可以根据需要进行调整和优化。
相关·内容
3回答
如何固定网页的一部分？
、、、
我正在创建一个包含一些内容的网页，它分为两个部分:左侧和右侧。右侧包含各种表单，需要滚动，左侧只包含一个图像和一些按钮/复选框，并且需要保持不变。因此，左侧本身不能滚动，但当我滚动右侧，左侧保持固定，我仍然可以看到它的内容，如果我在顶部或底部的页面。
在上图中，您可以看到我的主页。右边的内容是可滚动的，当你滚动它时，
浏览 0提问于2019-06-27得票数 0
回答已采纳
4回答
我现在想做的是在内容的两侧添加横幅，并在滚动时保持固定。左侧横幅的右侧应位于主要内容左侧的右侧。重要的是横幅固定在内容的边上，所以如果浏览器的宽度缩小，那么横幅的一部分就会从屏幕上消失，而不是横幅在主要内容上。
浏览 76提问于2016-12-01得票数 -2
1回答
我正在创建一个网页，其中我需要一个内容列在页面的中心(包括固定宽度)和两个不可滚动(固定)列在该内容列的左侧和右侧(包括固定宽度)。左列需要与中间内容列的左侧对齐。右列需要与中间内容列的右侧对齐。如果内容栏有很多内容，中间的内容栏应该是可滚动的，在浏览器的右侧有一个滚动条。但是左边和右边的列不能滚动，而是固定在浏览器的顶部。在左列的左侧和右列的<
浏览 0提问于2011-03-26得票数 3
回答已采纳
1回答
hidden; -webkit-overflow-scrolling: touch;}我想知道是否有类似z索引的东西，允许固定元素在滚动或
浏览 3提问于2014-08-20得票数 0
我正在尝试创建一个左侧内容，右侧固定图像布局，但是如果我将左侧列(包含所有内容)设置为60%宽度的相对位置，将右侧列设置为40%宽度的相对位置(其中包含固定图像div )，则当视区水平收缩时，固定图像仍会与左侧的内容重叠水平向下缩小视口，当它变小时，您将看到右侧图像与文本重叠。有谁知道如何创建内容的最小宽度，并允许溢出水平滚动？提前谢谢。
浏览 2提问于2015-03-06得票数 2
5回答
当图片框的内容太大时，我想要滚动条。我已经将面板上的自动滚动设置为true。但当picturebox的内容大于面板/picturebox的高度时，不会显示滚动条。我的面板固定在顶部、左侧、底部、右侧。picturebox也锚定在顶部、左侧、底部和右侧。
浏览 5提问于2010-01-12得票数 15
回答已采纳
4回答
固定位置问题
、、、
左侧固定到左侧。右侧固定到右侧。中间部分只能滚动。对于左侧，我使用了以下css： position:fixed; width:50px;}.right { right:0px;
浏览 1提问于2014-08-05得票数 0
2回答
修改NSScroller的长度
、、、、
我在我的Cocoa应用程序中使用了NSScrollView，并且我想自定义水平滚动条的长度。滚动视图的内容分为两个主要区域:左侧的固定宽度区域和右侧的动态宽度区域。左侧区域仅垂直滚动--当用户左右滚动时，它将固定在视图的左侧。以下是正在滚动的视图的截图：
我不希望水平滚动条与左侧的固定区域重叠。它应该被限制在右边的区域。我试过只设置水平
浏览 6提问于2011-08-16得票数 3
回答已采纳
1回答
我想修复左侧和右侧的div，而只滚动。它只在滚动时修复，并依赖于父div。我想做一些。在该网站上，左侧的类别div在滚动时是固定的，并且它只固定在父div中。在div上不超过。
这是我的。
浏览 0提问于2015-06-09得票数 1
我正在为来自alvarotrigo的Fullpage.js使用滚动水平扩展通过JS注入HTML元素的方式，我看不出如何修复该部分的标题，而不是单个幻灯片。
浏览 11提问于2022-10-31得票数 0
1回答
Jsp不可滚动和修复菜单
、、、
在我的JSP页面中，有一个菜单，左侧有14个选项，右侧有菜单描述。我已经在同一页的菜单上创建了超链接。菜单描述有很长的内容。页面的大小远不止菜单那么大。我的问题是，当我点击左边除第一个菜单项之外的任何菜单项时，页面向下滚动，菜单消失。是否有任何方法可以使左侧(菜单)不可滚动，并固定在该位置。只有页面的右侧会滚动。谢谢。
浏览 4提问于2011-05-17得票数 0
回答已采纳
2回答
在固定位置的div中滚动
、、、
我正在尝试描绘这样的东西：
内容固定在右侧，只有左侧滚动到特定的高度，然后正常滚动整个页面，问题是在我的情况下，当我在右侧div上向下滚动时，我的内容会移动。
浏览 1提问于2017-07-18得票数 0
有一个“液体”布局，左侧有固定宽度，右侧有“弹性”。由于某些原因，无法更改布局的标记。有时，右侧会变得非常宽(取决于其中的内容)，并且会出现水平滚动。是否有能力控制右侧的最大宽度，以防止水平滚动？
假设我设置了最小和最大允许值，Jquery决定如何处理它？
浏览 1提问于2010-07-24得票数 0
回答已采纳
2回答
目前，我在左侧有一个块，里面有一个可滚动的div标记：
当鼠标悬停在附加图像(棕色背景)的右侧时，我想滚动附加图像左侧的div标签，该如何实现？
浏览 5提问于2021-06-08得票数 0
4回答
我正在尝试构建以下布局(文件浏览器类型的东西，左侧块将包含文件列表，右侧面板将包含选定的文件内容)：<--- LEFT------ RIGHT --------->页面本身不应该有任何scrollbars.Menu具有100%的宽度和固定的高度，左块有固定的宽度和100%的高度。如果内容较高，则滚动</
浏览 3提问于2010-12-23得票数 3
回答已采纳
1回答
产品页面-分屏滚动
、、、
：我真的很喜欢上面链接中的滚动效果，我想把这个效果合并到我的网站中，它使用了“首次亮相”的主题。目标是让产品页面的左侧滚动，而右侧保持固定。之前有没有人用首次亮相的主题做过类似的事情?位置:固定
浏览 0提问于2019-01-31得票数 0
左侧的导航栏是一个fix div。它停留在那里，同时向下滚动右侧列中的主要内容。你可以在上真正看到它。希望有人能帮上忙。
浏览 1提问于2012-04-05得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
