13

ここにサイトがあります：http：//joshnh.com/

基本的に、画面の右側から出ているように見えるように、非常に広い要素がいくつかあります。次にoverflow-x: hidden;、本文でオーバーフローを非表示にしますが、ユーザーがトラックパッドを使用したり、マウスをクリックして右にドラッグしたりしても、ページが水平方向にスクロールするのを防ぐことはできません。

サイトは流動的であるため、設定overflow-x: hidden;は問題ありませんが、デザインを台無しにするため、コンテンツラッパーではなくbody/タグに設定する必要があります。html

また、このjQueryスニペットを使用して次のことを試みて支援しています。

(function($) {
    $(window).scroll( function() {
        $(window).scrollLeft(0);
    });
})(jQuery);

私は過去にそれをうまく使用しましたが、この場合はそれを機能させることができないようです。これは、縮小されたテストケースで機能する上記のスニペットを示すjsFiddleです：http：//jsfiddle.net/joshnh/pqpzN/

助言がありますか？

PSiOSでは正常に動作します。

更新：タッチパッドを介した水平スクロールを停止するjQueryスニペットを取得できたと思いますが、クリックとドラッグは引き続き機能します（テストケースでもクリックとドラッグが停止するため、説明できません。サイト）。

4

5 に答える 5

11

これを変更して問題を修正しました：

body,
html {
    overflow-x: hidden;
    width: 100%;
}

これに：

html {
    overflow-x: hidden;
    width: 100%;
}

問題を引き起こしていoverflow-x: hidden;たのは体の要素にありました。

于 2012-11-27T22:15:02.513 に答える
0

提案1

に最大幅を適用しbodyます。このようなもの：

body
{
    max-width:   100%;
    margin:    0 auto;
    overflow: visible;
}

ChromeとIE9でテストしましたが、気付いた唯一の問題はジャンプです。

于 2012-11-27T16:41:56.500 に答える
0

それは私には働いているようです。（ページに何をしたとしても、水平スクロールバーは表示されませんでした。）これoverflow-xが正しい解決策であり、JavaScriptを使用する必要はないと思います。私は使用html { overflow-x:hidden }しますが、あなたはすでにそれをしているようです。私が最初に行うことは、html5.validator.nuのページを検証し、「2つの連続したハイフン」エラーを修正することです。

于 2012-11-23T03:53:07.780 に答える
0

水平スクロールバーは表示されませんでしたが、マウスホイールの横方向スライド機能を使用して、画面が移動するのを見ることができました。メインのコンテンツ要素が画面に収まるサイズに設定されているように見えますが、ヘッダーとセクションタイトルの画像は永遠に繰り返され続けています。cssをどのように定義しているかはわかりませんが、ヘッダーを停止させるためにヘッダーに幅を適用するのと同じくらい簡単かもしれません。

あなた<header class="clearfix" role="banner">と<h1 class="section-title">About Me</h1>が犯人のようです。cssを使用して幅を制限すると、問題が解決するはずです。

于 2012-11-23T04:04:56.987 に答える
0

あなたにとってうまくいかなかったことが私のために働いた。以下のコードを使用しましたが、機能しました。

body,
html {
    overflow-x: hidden;
    width: 100%;
}

私が試したとき：

html {
    overflow-x: hidden;
    width: 100%;
}

それはうまくいきませんでした。

于 2015-03-31T15:28:23.413 に答える