我在一些网站上看到过这样的效果，例如artofadambetts.com。页面上的滚动条只滚动页面的一个元素，而不是整个页面。我查看了源代码，但还没有搞清楚这是怎么做到的。这是如何实现的呢？
11个回答
10
这很巧妙。他在大多数div上使用了“position:fixed”，而滚动的那个div则没有使用它。
- AviewAnew
5
事实上，承担“工作”的不是滚动部分，而是页面的固定部分。为了实现此功能，您应该使用CSS，并将
position: fixed;属性添加到您希望不滚动的元素中（请将其与top、bottom、left和/或right属性一起使用）。另外，不要忘记给它们更高的z-index值，否则在滚动时可能会有一些滚动元素覆盖您的固定元素（您肯定不希望出现这种情况）。- p4bl0
1
您可以使用固定定位或绝对定位将各种元素绑定到页面上的固定位置。 或者，您可以指定一个固定大小的元素（如DIV），并使用overflow：scroll来强制在该元素上出现滚动条。
正如已经提到的，在Internet Explorer和Firefox / Opera / Safari中让所有内容都正常工作需要谨慎使用黑客技巧。
- Anthony Williams
0
对于一个 div，你可以添加 CSS
overflow: auto
例如，
<div style="overflow:auto; height: 500px">一些非常长的文本</div>
编辑：在查看您发布的网站后，您可能不想要这个。他在他的网站上所做的是将布局设置为固定（position: fixed），并将其分配给比文本更高的z-index。
例如：<div class="highz"> //在此处放置随机内容。它将被固定 </div> <div class="lowz"> 在此处放置您想要滚动和定位的内容。</div>
带有CSS文件
div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}
- apandit
0
尝试使用以下代码来滚动网页的特定部分......
<html>
<head>
<title>Separately Scrolled Area Demo</title>
</head>
<body>
<div style="width: 100px; border-style: solid">
<div style="overflow: auto; width: 100px; height: 100px">
sumit..................
amit...................
mrinal.................
nitesh................
maneesh................
raghav...................
hitesh...................
deshpande................
sidarth....................
mayank.....................
santanu....................
sahil......................
malhan.....................
rajib.....................
</div>
</div>
</body>
</html>
- sumit pandey
0
- Cetra
0
浏览器正在滚动页面，只是其中的一部分位置固定。
这是通过在您不希望滚动的部分使用“position: fixed”CSS属性来实现的。
- Adam Franco
0
他们通过 CSS（请参见其 style.css 文件中的第 94 行）将侧面和顶部元素设置为固定位置。这使它们在视口内保持不变，而其他内容可以滚动。
- Buzz
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接