如何设置浏览器滚动条来滚动页面的一部分?

时间:2020-03-05 18:58:53  来源:igfitidea点击:

我已经在几个网站上看到了这一点,例如artofadambetts.com。页面上的滚动条仅滚动页面的一个元素,而不滚动整个页面。我查看了来源,但还无法弄清楚。这是怎么做的?

解决方案

回答

要将滚动条放在div等元素上:

`<div style =" overflow-x:auto;溢出-y:auto;>内容</ div>

如果只需要水平或者垂直滚动​​条,请仅使用所需的overflow-x和overflow-y。

回答

对于div,我们可以添加cSS

overflow: auto

例如,

<div style="overflow:auto; height: 500px">Some really long text</div>

编辑:在查看我们发布的网站后,我们可能不希望这样做。他在自己的网站上所做的工作是使布局固定(位置:固定),并为其分配较高的z索引,而不是文本的z索引更低。

例如:

<div class="highz"> //Put random stuff here. it'll be fixed </div>
<div class="lowz"> Put stuff here you want to scroll and position it.&lt/div>

与CSS文件

div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}

回答

那真是太漂亮了。他在大多数div上使用" position:fixed",而滚动的是没有div的。

回答

这可以在CSS中使用" position:absolute;"来完成。条款

这是一个示例模板:

http://www.demusdesign.com/bipolar/index.html

从http://www.demusdesign.com/

回答

浏览器正在滚动页面,页面的那一部分只是固定在适当的位置。

这是通过在我们不想滚动的部分上使用" position:fixed" CSS属性来完成的。

回答

他们通过CSS将side和top元素设置为固定位置(请参见style.css文件的第94行)。这将它们保持在视口中,而其余部分则滚动。

回答

实际上,并不是滚动部分在"完成工作",而是页面的固定部分。

为此,我们应该使用CSS并在我们不希望添加的元素上添加" position:fixed;"属性(与" top"," bottom"," left"和/或者" right"属性一起使用)滚动。

而且,不要忘了给它们提供更大的" z-index",如果不这样做的话,在滚动时可能会有一些滚动元素可以覆盖固定元素(并且我们当然不希望这样做)。

回答

要了解人们如何在CSS和/或者Javascript中执行此类操作,Firebug工具非常出色:

Firefox的Firebug插件

回答

应当注意的是,如果没有进一步的破解,就无法解决IE6的问题,IE6仍然可以占领15-30%的市场,具体取决于站点。

回答

我们可以使用固定定位或者绝对定位将各种元素绑定到页面上的固定位置。另外,我们可以指定一个固定大小的元素(例如DIV),并使用overflow:scroll强制滚动条在其上。

如前所述,要使所有内容都能在Internet Explorer和Firefox / Opera / Safari中正常工作,需要明智地使用黑客手段。