Question

enter image description here

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

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

是否有可用的插件？

Answer 1

不了解您的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

Answer 2

也许这是可能的。我已经创建了一个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的{{1}}值相关。

Answer 3

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

使用浏览器/页面滚动条在固定位置滚动div内的内容

3 个答案: