如何設置瀏覽器滾動條來滾動頁面的一部分？

我已經在幾個網站上看到了這一點，例如artofadambetts.com。頁面上的滾動條只滾動頁面的一個元素，而不是整個頁面。我看了看源頭，還沒有弄清楚。這是如何完成的？如何設置瀏覽器滾動條來滾動頁面的一部分？

來源

2008-09-17 airportyh

這是非常漂亮的。他在大多數div上使用「position：fixed」，滾動的是沒有它的那個。

來源

2008-09-17 13:35:06

-3

爲了把一個元素上的滾動條，如一個div：

<div style="overflow-x: auto; overflow-y: auto;>the content</div>

如果你只想要一個水平或垂直滾動條，只使用你需要溢出 - X和溢出-Y的爲準。

來源

2008-09-17 13:34:41

對於一個div，你可以在CSS

overflow: auto

例如添加，

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

編輯：看您發佈的網站後，你可能不希望這樣。他在他的網站上做的是使佈局固定（位置：固定），併爲它指定比z-index更低的文本更高的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.</div>

與CSS文件

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

來源

2008-09-17 13:35:01 apandit

這可以在CSS中使用「position：absolute;」完成第

下面是一個例子模板：

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

從http://www.demusdesign.com/

來源

2008-09-17 13:35:48 Cetra

瀏覽器是滾動頁面，它只是其中的一部分被固定在適當位置。

這是通過在您希望不滾動的零件上使用「position：fixed」CSS屬性完成的。

來源

2008-09-17 13:36:21

他們已經通過CSS設置了側邊和頂端的元素，請參見style.css文件的第94行。這使它們在視口中保留，而其餘的則滾動。

來源

2008-09-17 13:36:45 Buzz

事實上，它不是滾動的部分是「做這個工作」，它是頁面的固定部分。

爲了做到這一點，你應該使用CSS，並添加position: fixed;財產（含top，bottom，left和/或right性質使用它）到您不希望滾動的元素。

你不應該忘記給他們一個更大的z-index，如果你不在那裏可能會有一些滾動元素可以在你滾動的時候覆蓋你的固定元素（而你當然不需要這樣做）。

來源

2008-09-17 13:38:07 p4bl0

要了解人們如何在CSS中做這些事情和/或Javascript工具Firebug是隻是優秀：

Firebug addon for Firefox

來源

2008-09-17 13:40:48

應當指出的是，沒有固定的IE6不工作further hacks位置，該公司仍然保持15-30％的市場份額，這取決於你的網站。

來源

2008-09-17 13:42:39

好一點。該網站不'在IE 6中工作。 – airportyh 2008-09-17 13:46:17

您可以使用固定定位或絕對定位將各種元素綁定到頁面上的固定位置。或者，您可以指定一個固定大小的元素（如DIV），並使用overflow: scroll來強制滾動條。如前所述，讓所有工作在Internet Explorer和Firefox/Opera/Safari中都需要明智地使用黑客。

來源

2008-09-17 13:46:25

試試這個滾動網頁的特定部分......

<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>

來源

2011-11-29 07:00:55

如何設置瀏覽器滾動條來滾動頁面的一部分？

回答

相關問題