web-dev-qa-db-ja.com

スクロールdiv内のdivを修正しました

980px widthと500px height（class = "main"）を持つサイトのメインを、マウスがスクロールdivの上にあり、height of 1500pxとaがある場合にのみ修正する必要があります。 width of 100%（class = "container-scroll"）、つまりheight of 500px.（class = "container"）を持つ他のdiv内にあります

かなり混乱していますよね？

私はフィドルを作りました、私はもうすぐそこにいます、問題は、メインを固定に設定すると、div内だけでなく、ページとともにスクロールすることです

これは私のフィドルです： https://jsfiddle.net/8oj0sge4/1/embedded/result/

HTML：

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

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

CSS：

    #wrapper {
        width: 100%;
        height: 1500px;
        border: 1px solid red;
        padding-top: 380px;
    }
    #wrapper .container {
        border: 1px solid green;
        width: 100%;
        height: 500px;
        overflow: scroll;
    }
    #wrapper .container-scroll {
        height: 1500px;
        width: 100%;
        border: 1px solid yellow;
    }
    #wrapper .main {
        width: 980px;
        height: 500px;
        background: black;
        overflow: scroll;
        /*position: fixed;*/
    }
javascriptjqueryhtmlcssfrontend
22
user3998237

私がこれを正しく理解している場合、メインdivを親divの上に残したいですか？

フィドル： https://jsfiddle.net/8oj0sge4/3/ （ full ）

行われた変更：

  • #wrapper .main：追加されたposition:absolute（親に「固定」）
  • #wrapper .container-scroll：追加されたposition: relative（どの親に「修正」するかを決定します）
  • メイン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";
}
26
TiiJ7

これを行うための純粋なCSSはありませんが、Javascriptを使用して回避できます。

1つの解決策は、このフィドルでデモされている#wrapperでスクロールが開始されている場合、内側のdivでスクロールを無効にすることです。

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を使用してそれを実現することは無意味ですが、私はそれを駅で急いでいます。より多くの時間を見つけることができたら、より良いコードを提供します:-)

5
floribon