web-dev-qa-db-ja.com

本文はoverflow-y：hiddenに設定されていますが、ページはChrome

Chromeのoverflow-yプロパティに問題があります。 hiddenに設定しましたが、マウスホイールでページをスクロールできます。

ここに私のコードがあります：

html,
body {
  overflow-y: hidden;
}

#content {
  position: absolute;
  width: 100%;
}

.step {
  position: relative;
  height: 500px;
  margin-bottom: 500px;
}
<body>
  <div id="content">
    <div class="step">this is the 1st step</div>
    <div class="step">this is the 2nd step</div>
    <div class="step">this is the 3rd step</div>
  </div>
</body>

Chromeで垂直スクロールをブロックする方法を知っている人はいますか？

ありがとう！

cssgoogle-chromescrollscrollbaroverflow
23
Cécile Boucheron

私はついに問題を解決する方法を見つけたので、私はここで答えています。

overflow-y上の#content代わりに、ステップを別のdivにラップしました。できます。

最終的なコードは次のとおりです。

<body>
  <div id="content">
    <div id="steps">
       <div class="step">this is the 1st step</div>
       <div class="step">this is the 2nd step</div>
       <div class="step">this is the 3rd step</div>
     </div>
   </div>
</body>

#content {
  position:absolute;
  width:100%;
  overflow-y:hidden;
  top:0;
  bottom:0;
}
.step {
  position:relative;
  height:500px;
  margin-bottom:500px;
}
18
Cécile Boucheron

体の高さとHTMLを100％に設定すると、問題は解決します。定義された高さがない場合、コンテンツはオーバーフローしないため、目的の動作が得られません。

html, body {
  overflow-y:hidden;
  height:100%;
}
36
RhinoWalrus

/ FFおよび/ Chromeで私に有効なもの：

body {

    position: fixed;
    width: 100%;
    height: 100%;

}

overflow: hiddenは、スクロールバーの表示を無効にします。 （ただし、必要に応じてそこに配置できます）。

欠点が1つあります。スクロールを一時的に停止するだけのページでこのメソッドを使用する場合、position: fixedは上部にスクロールします。これは、position：fixedが現在0/0に設定されている絶対位置を使用するためです。

これは修復できます。 jQueryを使用：

var lastTop;

function stopScrolling() {
    lastTop = $(window).scrollTop();      
    $('body').addClass( 'noscroll' )          
         .css( { top: -lastTop } )        
         ;            
}

function continueScrolling() {                    

    $('body').removeClass( 'noscroll' );      
    $(window).scrollTop( lastTop );       
}
13
Scheintod

私が動作することがわかった別の解決策は、内部コンテナにmousewheelハンドラーを設定し、最後のパラメーターをfalseに設定してイベントバブルを停止することで伝播しないようにすることです。

document.getElementById('content').addEventListener('mousewheel',function(evt){evt.cancelBubble=true;   if (evt.stopPropagation) evt.stopPropagation},false);

スクロールは内部コンテナで正常に機能しますが、イベントは本体に伝播しないため、スクロールしません。これは、ボディプロパティoverflow：hiddenおよびheight：100％の設定に追加されます。

3
dareapersven

体のスクロールを「修正」したいときにこれを試してください：

jQuery('body').css('height', '100vh').css('overflow-y', 'hidden');

そしてこれを再び通常に戻したい場合：

jQuery('body').css('height', '').css('overflow-y', '');
1
Maxi

つかいます：

overflow: hidden;
height: 100%;
position: fixed;
width: 100%;
1
Gagan

わかりましたので、これは私のウェブサイトの1つでこの問題があったときに私のために働いた組み合わせです：

html {
    height: 100%;
}

body {
    overflow-x: hidden;
}
0
Milan Meuleman

本体よりも大きい要素（ページをスクロールさせる要素）を見つけ、その位置を固定に設定します。注：ドラッグ可能な要素の位置を変更するつもりはありません。ドラッグ可能な要素は、本体よりも大きい要素（主に幅）がある場合にのみ、本体からドラッグできます。

0
Vikas Bidhuri