修复了滚动div内的div

时间:2014-10-07 18:18:30

标签: javascript jquery html css frontend

我需要使我的网站的主要内容980px width500px height(class =“main”)只有在鼠标位于滚动div并且{{1}时才会被修复和height of 1500px(class =“container-scroll”),在width of 100%的其他div中(class =“container”)

很困惑,对吧?

我做了一个小提琴,我差不多了,问题是如果我将主要设置为固定,它将滚动页面,而不仅仅是在div内部

这是我的小提琴:https://jsfiddle.net/8oj0sge4/1/embedded/result/

HTML:

height of 500px.

CSS:

<div id="wrapper">
    <div class="container">
        <div class="container-scroll">
            <div class="main">

            </div>
        </div>
    </div>
</div>

3 个答案:

答案 0 :(得分:26)

如果我正确理解这一点,您希望主div保留在父div的顶部吗?

小提琴:https://jsfiddle.net/8oj0sge4/3/full

所做的更改:

  • #wrapper .main:已添加position:absolute(&#34;已修复&#34;为父级)
  • #wrapper .container-scroll:已添加position: relative(确定父母为&#34;修复&#34;至
  • 在主div中添加了一个id(为方便起见)

JavaScript代码:

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight; // Make sure we don't go outside the parent

main.parentNode.parentNode.onscroll = function() {
   main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}

答案 1 :(得分:5)

没有纯CSS可以做到这一点,但你可以使用一些Javascript解决它。

如果已经在div上启动了滚动,那么一个解决方案可能是禁用内部#wrapper上的滚动,这是在这个小提琴上演示的:

https://jsfiddle.net/qmjmthbz/

以下是代码:

var wrapper = $('#wrapper');
var container = $('.container');
var timer;

// Listen to mouse scroll events
$('body').on('mousewheel', function(e) {
    var target = $(e.target);
    /* If the scroll is initiated from the #wrapper,
       disable scroll on the container and re-enable it
       100ms after the last scroll event */
    if (target[0] === wrapper[0]) {
        container.addClass('no-scroll');
        clearTimeout(timer);
        timer = setTimeout(function() {
            container.removeClass('no-scroll');
        }, 100);
    }
});

注意:使用jQuery实现这一点是没用的,但我在火车站赶紧行动。当我能找到更多时间时,我会提供更好的代码: - )

答案 2 :(得分:-1)

基本上我认为你不能制作div滚动,因为div的内容不超过div的高度。为了使div能够滚动,内容实际上应该超过div的高度。

尝试给div设置100px的高度,并插入足够大的文本以超过100px高度,从而使div可滚动,然后尝试是否可以实现。