仅滚动正文文档中的选定内容
我想使用页面滚动效果，以便在布局中仅滚动#right 元素的内容。滚动帖子时可以在 Facebook 上看到类似的效果（在左侧面板和上栏保持原位的同时滚动帖子）。你们中的任何人都知道如何在代码中为我的 #right 容器获得相同的效果？
#header,#footer{
width:100%;
height:80px;
background:blue;
}
#content{
width:1000px;
margin:0 auto;
overflow:hidden;
}
#left{
width:200px;
float:left;
background:green;
margin:20px 0;
height:100vh;
}
#right{
float:right;
width:calc(100% - 220px);
}
.item{
height:80px;
margin:20px 0;
background:red;
}
<div id="header">
header
</div>
<div id="content">
<div id="left">
left
</div>
<div id="right">
<!-- this content is scrolling-->
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
</div>
<div id="footer">
footer
</div>
交互式爱情3回答
-
守着一只汪
使用 JQuery，您可以添加样式为position:fixedand的类，top:0并使用滚动功能触发，以获得更好的侧面元素视图/效果。$(window).scroll(function(){ var header_height = $('#header').height(); if ($(this).scrollTop() > header_height) { $('#left').addClass('fixed'); } else { $('#left').removeClass('fixed'); }});#header,#footer{ width:100%; height:80px; background:blue;}#content{ width:1000px; margin:0 auto; overflow:hidden;}#left{ width:200px; float:left; background:green; margin:20px 0; height:100vh;}#right{ float:right; width:calc(100% - 220px);}.item{ height:80px; margin:20px 0; background:red;}.fixed{ position:fixed; top:0;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="header"> header</div><div id="content"> <div id="left"> left </div> <div id="right"> <!-- this content is scrolling--> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> </div></div><div id="footer"> footer</div> -
收到一只叮咚
position: fixed在CSS 中使用属性#header,#footer{ width:100%; height:80px; background:blue;}#content{ width:1000px; margin:0 auto; overflow:hidden;}#left{ width:200px; float:left; background:green; /* Enter The Position Fixed Property Here! */ position:fixed; margin:20px 0; height:100vh;}#right{ float:right; width:calc(100% - 220px);}.item{ height:80px; margin:20px 0; background:red;}<div id="header"> header</div><div id="content"> <div id="left"> left </div> <div id="right"> <!-- this content is scrolling--> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> </div></div><div id="footer"> footer</div>有一些位置错位，因为你有你的头。将此属性用于要滚动的 div。根据需要进行放置 -
白猪掌柜的
使用位置：固定并降低其“左”类的高度。
随时随地看视频慕课网APP
相关分类
JavaScript