中央揃えのDIVのあるWebサイトがあります。現在、スクロールが必要なページとそうでないページがあります。あるタイプから別のタイプに移動すると、スクロールバーの外観により、ページが数ピクセル横に移動します。各ページにスクロールバーを明示的に表示せずにこれを回避する方法はありますか？
—
廃止
中央揃えのDIVのあるWebサイトがあります。現在、スクロールが必要なページとそうでないページがあります。あるタイプから別のタイプに移動すると、スクロールバーの外観により、ページが数ピクセル横に移動します。各ページにスクロールバーを明示的に表示せずにこれを回避する方法はありますか？
回答:
overflow-y：scrollは正しいですが、それをbodyタグではなくhtmlタグで使用する必要があります。そうしないと、IE 7でダブルスクロールバー
が表示されるので、正しいCSSは次のようになります。
html {
overflow-y: scroll;
}スクロール可能な要素のコンテンツをdivにラップして適用しますpadding-left: calc(100vw - 100%);。
<body>
<div style="padding-left: calc(100vw - 100%);">
Some Content that is higher than the user's screen
</div>
</body>トリックは100vw、スクロールバーを含むビューポートの100％を表すことです。100%スクロールバーなしで使用可能なスペースであるを減算すると、スクロールバーの幅になるか、スクロールバー0が表示されなくなります。左側にその幅のパディングを作成すると、2番目のスクロールバーがシミュレートされ、中央に配置されたコンテンツが右に戻ります。
これは、スクロール可能な要素がページの幅全体を使用する場合にのみ機能することに注意してください。ただし、スクロール可能なコンテンツを中央に配置するケースは他にほとんどないため、ほとんどの場合これは問題になりません。
@media screen and (min-width: 800px) {...} ます。コンテンツがページ幅に収まる場合。たとえば、小さな解像度では不要なギャップが生じ、コンテンツが右にシフトします
私はそうは思いません。しかし、でスタイリングbodyするoverflow: scroll必要があります。しかし、あなたはそれを知っているようです。
overflow-y: scroll:)
常にスクロールが表示されるので、レイアウトには向かないかもしれません。
css3で本体の幅を制限してみてください
body {
width: calc(100vw - 34px);
}vwビューポートの幅です（いくつかの説明については、このリンクを参照してください）
calc。css3で計算し
34pxます。ダブルスクロールバーの幅を表します（固定サイズについては、これを参照してください。固定サイズが信頼できない場合は、これを計算してください）。
padding-left: 34px;います。また、ページを中央揃えに追加しました。
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}例。「最小高さの変更」ボタンをクリックします。
これcalc(100vw - 100%)で、スクロールバーの幅を計算できます（表示されない場合は0になります）。アイデア：負のマージン右を使用して、幅<html>をこの幅に増やすことができます。水平スクロールバーが表示されます—を使用して非表示にする必要がありますoverflow-x: hidden。
calc(100% - 100vw)乗算するのではなく単に使用しないのはなぜ-1ですか？
これが古い投稿かどうかはわかりませんが、同じ問題があり、縦方向にのみスクロールしたい場合は、 overflow-y:scroll
サイズを変更したり、データを読み込んだ後にスクロールバーを追加したりする場合は、クラスを作成し、このクラスを適用してください。
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}ビューポートのサイズからスクロールバーの幅を引いた値でJavaScriptの本文の幅を明示的に設定することにより、私のWebサイトの1つで問題を解決しました。ここに記載されているjQueryベースの関数を使用して、スクロールバーの幅を決定します。
<body id="bodyid>
var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";これを使用して答えを拡張する：
body {
width: calc(100vw - 17px);
}あるコメント投稿者は、中央揃えを維持するために左パディングも追加することを提案しました：
body {
padding-left: 17px;
width: calc(100vw - 17px);
}ただし、コンテンツがビューポートよりも広い場合は、正しく表示されません。これを修正するには、次のようなメディアクエリを使用できます。
@media screen and (min-width: 1058px) {
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
}ここで、1058px =コンテンツの幅+ 17 * 2
これにより、水平スクロールバーがxオーバーフローを処理し、ビューポートが固定幅のコンテンツを含めるのに十分な幅の場合、中央に配置されたコンテンツを中央に維持します。
Raptiの回答から拡張すると、これも同様に機能するはずですが、ページのレイアウトに影響を与える可能性のある余分なパディングを追加する代わりに、の右側にマージンを追加bodyし、負のhtmlマージンで非表示にします。この方法では、実際のページでは何も変更されず（ほとんどの場合）、コードは引き続き機能します。
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}overflow-x: hidden、それを修正しました。
@kashesandrの解決策は私にとってはうまくいきましたが、水平スクロールバーを非表示にするために、本文にもう1つのスタイルを追加しました。ここに完全なソリューションがあります：
CSS
<style>
/* prevent layout shifting and hide horizontal scroll */
html {
width: 100vw;
}
body {
overflow-x: hidden;
}
</style>JS
$(function(){
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
});JSのみのソリューション（2番目のモーダルが1番目のモーダルから開かれた場合）：
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
$('body').css('padding-right', 17);
}
});に.modal-open適用されたtwitterブートストラップクラスによって引き起こされた同じ問題を修正しようとしましたbody。解決策html {overflow-y: scroll}は役に立ちません。私が見つけた1つの可能な解決策は{width: 100%; width: 100vw}、html要素に追加することです。
html { width: 100vw; }私のために働きました
calc（100vw-100％）を使用して投稿された解決策は正しい方向にありますが、これには問題があります。ウィンドウのサイズを変更してもコンテンツはビューポート全体を占めます。
メディアクエリでこれを回避しようとすると、ウィンドウのサイズを変更してもマージンが徐々に小さくならないため、厄介なスナップの瞬間があります。
これを回避するソリューションは次のとおりです。AFAIKには欠点がありません。
margin：autoを使用してコンテンツを中央に配置する代わりに、これを使用します。
body {
margin-left: calc(50vw - 500px);
}500pxをコンテンツの最大幅の半分に置き換えます（この例では、コンテンツの最大幅は1000pxです）。これでコンテンツは中央に配置されたままになり、コンテンツがビューポートいっぱいになるまでマージンが徐々に減少します。
ビューポートがmax-widthより小さいときにマージンが負にならないようにするには、次のようなメディアクエリを追加します。
@media screen and (max-width:1000px) {
body {
margin-left: 0;
}
}エボラ！
テーブルの幅が変更されない場合は、スクロールバーを含む要素（tbodyなど）の幅を> 100％（スクロールバー用に余分なスペースを許可）に設定し、overflow-yを "overlay"（つまりスクロールバーは固定されたままで、表示されたときにテーブルを左にシフトしません）。また、スクロールバーを使用して要素に固定の高さを設定し、高さを超えるとスクロールバーが表示されるようにします。そのようです：
tbody {
height: 100px;
overflow-y: overlay;
width: 105%
}注：スクロールバーが占めるスペースの％はテーブルの幅に比例するため、幅％を手動で調整する必要があります（つまり、テーブルの幅が小さいほど、スクロールバーにフィットするために必要な％は、ピクセル単位のサイズが一定であるためです）
動的テーブルの例：
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++)
{
var newRow = row.insertCell(i);
newRow.innerHTML = table.rows[0].cells[i].innerHTML;
newRow.childNodes[0].value = "";
}
}
function deleteRow(row)
{
var table = document.getElementById("data");
var rowCount = table.rows.length;
var rowIndex = row.parentNode.parentNode.rowIndex;
document.getElementById("data").deleteRow(rowIndex);
}.scroll-table {
border-collapse: collapse;
}
.scroll-table tbody {
display:block;
overflow-y:overlay;
height:60px;
width: 105%
}
.scroll-table tbody td {
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.scroll-table thead tr {
display:block;
}
.scroll-table td {
border-top: thin solid;
border-bottom: thin solid;
}
.scroll-table td:first-child {
border-left: thin solid;
}
.scroll-table td:last-child {
border-right: thin solid;
}
.scroll-table tr:first-child {
display: none;
}
.delete_button {
background-color: red;
color: white;
}
.container {
display: inline-block;
}
body {
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="test_table.css">
</head>
<body>
<h1>Dynamic Table</h1>
<div class="container">
<table id="data" class="scroll-table">
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="button" class="delete_button" value="X" onclick="deleteRow(this)"></td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onclick="addRow('data')" />
</div>
<script src="test_table.js"></script>
</body>
</html>私はこれを解決するためにいくつかのjqueryを使用しました
$('html').css({
'overflow-y': 'hidden'
});
$(document).ready(function(){
$(window).load(function() {
$('html').css({
'overflow-y': ''
});
});
});@media screen and (min-width: 1024px){
body {
min-height: 700px
}
}
overflow-y: overlayこのスレッドで誰も言及しないのはなぜですか？