使用瀏覽器/頁面滾動條

enter image description here 使用瀏覽器/頁面滾動條

我有一些div的與position:fixed所有頁面各處滾動的div裏面的內容有固定的位置。其中一個div有更長的內容。

我的目標是我想使用主瀏覽器/頁面滾動條滾動該框內的內容。 （其不正常overflow:autolike this） 這是確切的情況 http://s7.postimage.org/d6xl1u9mz/sample.jpg

任何插件可用？

來源

2013-01-21 Chandu vkm

它不是我的決定，我不得不這樣做不好:( –

又是怎麼回事鼠標滾輪:) –

聽起來像是你可以把在主體內容，而'位置：fixed'之上的一切的。但是，如果沒有實際的代碼，我們無法給你任何具體的東西。 – Blazemonger

也許這是可能的。我已經創建了一個jsFiddle這是個竅門。這不是完美的，但你可以進一步發展......這個片段只適用於現代瀏覽器，但對於較老的IE也很容易修復。下面的核心代碼。

的JavaScript：

window.onload = function() { 
    var content = document.getElementById('contentwrapper'), 
     dimdiv = document.getElementById('scrollingheight'), 
     wrapHeight = document.getElementById('fixed').offsetHeight, 
     scroller = function() { 
      content.style.top = -(document.documentElement.scrollTop || document.body.scrollTop) + 5 + 'px'; 
      return; 
     }; 
    dimdiv.style.minHeight = (content.scrollHeight - wrapHeight + 2 * 5) + 'px'; 
    window.addEventListener('scroll', scroller, false); 
    return; 
}

CSS：

#fixed { 
    position: fixed; 
    min-width: 300px; 
    min-height: 200px; 
    max-height: 200px; 
    background: #fff; 
    left: 150px; 
    top: 200px; 
    overflow-y: hidden; 
    border: 1px solid #000; 
} 
#contentwrapper { 
    max-width: 290px; 
    position: absolute; 
    top: 5px; 
    left: 5px; 
} 
#scrollingheight { 
    position: absolute; 
    top: 100%; 
    visibility: hidden; 
    min-width: 1px; 
}

HTML：

<div id="scrollingheight"></div> 
<div id="fixed"> 
    <div id="contentwrapper"> 
     content 
    </div> 
</div>

通知書的，在body所有內容，但#scrollingheight，必須是固定的。常量5與#contentwrapper的top值有關。

來源

2013-01-21 17:09:07 Teemu

AFAIK 你不能那樣做。
至少不是沒有一些邪惡的JS欺騙。
Why?因爲您不能強制瀏覽器的默認滾動條高度（使其更小）以包含與html, body（文檔）完全不同的區域內的某些內容。
我的建議是，你建立一個自定義滾動條，計算你的漂亮overflow hidden區域的高度，把它加到可滾動比例的計算中。

來源

2013-01-21 15:27:45

沒有你的HTML知識：

<body> 
    <section id="bodyContent"></section> 
    <header></header> 
    <section id="lSide"></section> 
    <section id="rSide"></section> 
</body>

#bodyContent { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    min-height: 100%; 
    width: 100%; 
    padding: 90px 45px 0px 105px; 
    background-clip: content-box; 
    background-color: #FFFFFF; 
} 

body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background-image: url(page_background.jpg); 
    background-attachment: fixed; 
} 
header, #lSide, #rSide { 
    position: fixed; 
} 
header { 
    top: 0; 
    width: 100%; 
    height: 90px; 
    background-image: url(page_background.jpg); 
    background-attachment: fixed; 
} 
#lSide { 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 105px; 
    padding: 90px 0 0 0; 
} 
#rSide { 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 45px; 
    padding: 90px 0 0 0; 
}

這將迫使#bodyContent內容坐在各個邊界元素之間的開口內，它會導致任何溢出到觸發滾動條你想要的元素body。 JSFiddle

來源

2013-01-21 18:47:58 joequincy

看起來你已經擊敗了我和羅克森：）。只有''bodyContent'煩人'width：100％;'需要修復，現在它總是隱藏一部分內容。 +1無論如何... – Teemu

我不確定你指的是隱藏部分內容。在我的測試中，所有的內容都是可見的（除非上下滾動）。 – joequincy

Outch ...它似乎只在Firefox中執行...... FF需要'-moz-box-sizing' – Teemu

使用瀏覽器/頁面滾動條

回答

相關問題