固定divでスクロールするときに本文がスクロールしないようにする

overflow: scrollでfixed divを作成するには、bodyがdivにスクロールしてスクロールするときにスクロールしないようにするにはどうすればよいですか？ facebook.comのウィンドウの下部にある固定チャットボックスのような並べ替え。固定divでスクロールするときに本文がスクロールしないようにする

私はstopPropagation()にアップbubbelingからscroll、wheelとtouchmoveイベントをキャプチャし、停止するためにJavaScriptを使用して試してみたが、動作するようには思えません。私はここにできる限り問題に簡略化しました

：https://jsfiddle.net/m9uamaza/

の目標は、「foo」という体が移動することなく固定「バー」のdivに上下にスクロールすることです。 "bar" divが一番下までスクロールされ、スクロールし続けると、スクロールを開始したくありません。マウスが固定されたdivの上にないときは、本体はスクロール可能でなければなりません。

出典

2017-07-18 alvoha

私はここにあなたの答えを更新したが、私は、コード

inner.addEventListener('wheel', function(e) { 
if(e.wheelDelta < 0) { 
    if((this.scrollHeight-this.scrollTop-200)<=0){ 
    e.preventDefault(); 
    } 
    } 
    else 
    if(this.scrollTop==0){ 
     e.preventDefault(); 
    } 
}, false);

あなたはその

var inner = document.getElementById('inner'); 
 
var outer = document.getElementById('outer'); 
 

 
inner.addEventListener('scroll', function(e) { 
 
    e.stopPropagation(); 
 
}, false); 
 

 
inner.addEventListener('wheel', function(e) { 
 
if(e.wheelDelta < 0) { 
 
    if((this.scrollHeight-this.scrollTop-200)<=0){ 
 
    e.preventDefault(); 
 
    } 
 
    } 
 
    else 
 
    if(this.scrollTop==0){ 
 
     e.preventDefault(); 
 
    } 
 
}, false); 
 

 
inner.addEventListener('touchmove', function(e) { 
 
    e.stopPropagation(); 
 
}, false);

.fixed { 
 
    position: fixed; 
 
    top: 100px; 
 
    left: 100px; 
 
    background-color: #eef; 
 
    height: 200px; 
 
    width: 200px; 
 
    overflow-y: scroll; 
 
}

<body> 
 
    <div id="outer"> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <div class="fixed" id="inner"> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
     <p>bar</p> 
 
    </div> 
 
    </div> 
 
</body>

ようにしたい場合にも、ここでのデモを提供し、以下に変更したリンク

https://jsfiddle.net/m9uamaza/3/

です

出典

2017-07-18 22:53:51

私はあなたの助けに感謝しますが、この問題を解決していないようです。 "foo"本体を半分ほど下にスクロールし、固定 "bar" divの上にマウスを移動してスクロールすると、 "foo"本体がスクロールアップします。別の奇抜な点は、bar divが一番下までスクロールされると、ユーザーは再び上にスクロールできなくなることです。私は自分の問題を十分に明確に表現していないかもしれません。私は私の質問を編集し、私の問題をよりよく説明しようとします。 – alvoha

今回は、動作しているかどうかを確認します。もう一度更新しました。そのようにしたいと思っています –

あなたはこのCSS、そのための任意のJavascriptを必要としない：

.inner { 
    position: fixed; 
    top: 100px; 
    left: 100px; 
    background-color: #eef; 
    height: 200px; 
    width: 200px; 
    overflow-y: scroll; 
}

はこちらを参照してください。https://jsfiddle.net/eaw76th1/2/（編集：更新は、間違ったバージョンを保存していた）

出典

2017-07-18 23:34:45 Johannes

残念ながら、これは動作しません。このソリューションは、私のオリジナルのjsfiddleと同じように動作します。問題は、 'bar' divで上下にスクロールできるようにすることですが、一番下に到達すると、 'foo'ボディがスクロールしないようにします。 – alvoha

申し訳ありませんが、私はあなたが何を意味しているのか分かりません：私のフィドル（すなわちfirefox mac）で 'bar'が下に来ると、 'foo'は影響を受けませんscoll inside 'bar'。 – Johannes

固定divでスクロールするときに本文がスクロールしないようにする

答えて

関連する問題