28

overflow-yChromeのプロパティに問題があります。に設定しても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 で垂直スクロールをブロックする方法を知っている人はいますか?

ありがとう！

4

10 に答える 10

49

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

html, body {
  overflow-y:hidden;
  height:100%;
}
于 2013-10-08T21:37:58.517 に答える
19

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

代わりに を設定し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;
}
于 2013-10-09T18:17:17.390 に答える
3

私が見つけた別の解決策は、内側のコンテナーにマウスホイールハンドラーを設定し、最後のパラメーターを false に設定してイベント バブルを停止することで、それが伝播しないようにすることです。

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

内側のコンテナーではスクロールは正常に機能しますが、イベントは本体に伝播されないため、スクロールしません。これは、body プロパティのoverflow:hiddenおよびheight:100%の設定に加えて行われます。

于 2014-07-29T20:44:24.707 に答える
1

使用する：

overflow: hidden;
height: 100%;
position: fixed;
width: 100%;
于 2016-07-27T14:14:30.777 に答える
-3

技術的には、 と のサイズはbody画面htmlよりも広いため、スクロールが必要になります。margin:0;設定しpadding:0;てスクロール動作を回避し、代わりにマージン/パディングを追加する必要があり#contentます。

于 2013-10-08T16:32:46.653 に答える
-4

正解は、JUST body を overflow:hidden に設定する必要があるということです。何らかの理由で、html も overflow:hidden に設定すると、結果はあなたが説明した問題になります。

于 2014-02-17T05:41:28.570 に答える