使用浏览器/页面滚动条

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

使用浏览器/页面滚动条

回答

相关问题