1

フレームの下をスクロールするコンテンツ全体にフレームを作成する必要があります

上余白を下余白、左右余白にしました

正しく動作しているようですが、下と中央または上と中央の間で無効なピクセルが表示されることがあります

モバイルデバイスでは、ビューポートが設定されていないと、少し最悪になります

同じものをより良い方法で作る方法について他にアイデアがありません

ここにリンクの例 http://jsfiddle.net/zBAPX/

#mask-center-container {
 z-index: 1000;
 position: fixed;
 top: 10%;
 bottom: 4%;
 left: 0;
 right: 0;
 width: 100%;
 margin: 0;
 padding: 0;
}

#mask-center-container-sx {
 height: 100%;
 width: 21%;
 background: #000;
 opacity: 0.5;
 margin: 0;
 padding: 0;
}

#mask-center-container-ce {
 height: 100%;
 width: 56%;
 margin: 0;
 padding: 0;
}

#mask-center-container-dx {
 height: 100%;
 width: 22%;
 background: #000;
 opacity: 0.5;
 margin: 0;
 padding: 0;
}

#mask-top {
 z-index: 3000;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;  
 height: 10%;
 width: 100%;
 background: #000;
 opacity: 0.5;
 margin: 0;
 padding: 0;
}

#mask-bottom {
 z-index: 3000;
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;  
 height: 4%;
 width: 100%;
 background: #000;
 opacity: 0.5;
 margin: 0;
 padding: 0;
}
4

1 に答える 1

0

効果的に要素をクリックして「スルー」する方法を 1 つだけ知っています。それは、実験的pointer-eventsプロパティを使用することです。CSS Tricks からの記事は次のとおりです。

http://css-tricks.com/almanac/properties/p/pointer-events/

1 つの大きな欠陥: IE11 より前の IE はサポートされていません。

于 2013-10-26T12:41:08.317 に答える