2

在此处输入图像描述

position:fixed我在页面周围都有一些 div 。其中一个 div 的内容稍长。

我的目标是我想使用主浏览器/页面滚动条滚动该框中的内容。（这样不正常）overflow:auto 这是确切的情况 http://s7.postimage.org/d6xl1u9mz/sample.jpg

有可用的插件吗？

4

3 回答 3

2

在不了解您的 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-21T18:47:58.897 回答
1

也许这是可能的。我创建了一个可以解决问题的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>

请注意，必须修复, but中的所有内容。常量与'值有关。body#scrollingheight5#contentwrappertop

于 2013-01-21T17:09:07.627 回答
0

AFAIK你不能那样做。
至少不是没有一些邪恶的 JS 诡计。
Why?因为您不能强制浏览器的默认滚动条高度（使其更小）包含与html, body（文档）完全不同的区域内的某些内容。
我的建议是您构建一个自定义滚动条，计算好overflow hidden区域的高度，将其添加到可滚动比率计算中。

于 2013-01-21T15:27:45.097 回答