2011-08-03 9 views
6

私はユーザーがスクロールできるようにしたくないページがあります。それを防ぐために、私はボディに隠れたオーバーフロースタイルを設定しました。これは、ユーザが何らかのテキストを選択しようとしてから、一番下にドラッグするまでは十分です。ウィンドウがスクロールして、ユーザーがドラッグします。どうすればこれを防ぐことができますか?テキストを選択/ドラッグするときにページのスクロールを停止する

+2

参考になっすることができます。あなたがhttp://jsfiddle.netのようなものを使ってライブの例を作ることができれば、それはさらに優れています。 – tw16

+0

私はあなたの方法は、あなたが何かを見ないようにしたい場合、またはいくつかのデータが奇妙なハックを使用するディスプレイに必要な場合、あなたの方法は少し欠陥があると思う:cssまたは隠された入力フィールド。基本的な基本的なブラウザの機能を妨害しようとすることは、ユーザビリティの災害のレシピです。 – Louis

+0

私の欠陥のある方法をお詫び申し上げます。ある時点では、アニメーション中に、divはCSS変換を使用してスケーリングされ、可視領域外に広がります。これらの瞬間に、ユーザがドラッグすると、それらを所望のビュー領域から移動させる。私は、この選択/ドラッグプロセス中に発砲したイベントがあって、私が傍受することができたと思っていました。 – rewolf

答えて

17

position: fixed;

body 
{ 
    position: fixed; 
} 

EDIT:あなたは全身が非スクロール可能にしたい場合は、ユーザサムからのコメントを受けた後、私は戻って、もう一度、このメソッドをテストすることにしました。左の終わるからいくつかのサイトを(stackoverflowのが含まれています)

html 
{ 
    position: fixed; 
    width: 100%; 
    height: 100%; 
} 

ザ・防止:今、私はそれとそれがスタイルで混乱、私はよりよい解決策になる、以下の結論に来ているだろうとサムの懸念を再考することを整列した。また、利用可能な最上位のノードも使用します。これは、最初に実行されたはずです。

+10

私はあなたにキスしたい。ホモなし – rewolf

+2

O_o私はそれを "人の抱擁"のような形で取り上げます。 –

+0

Safariのアドレスバーが追加されているため、モバイルにはあま​​り役に立ちません。 –

2

私はJosephsの答えを試しましたが、ウェブサイト上で多くのスタイルを混乱させる可能性があります。

もう1つの方法は、ウェブサイトのオーバーフローを隠しておくことです。これは理想から遠いものですが、私にとってはスタイリングを邪魔しませんでした。うまくいけば、これは誰かにとって有益です。

body { 
    overflow-y: hidden;  
} 
+0

これは私の意見ではより正確な解決策です。オーバーフローは、ページのスクロールを直接処理します。これは、テキストを強調表示している間、元のポスターの移動の問題を修正するものではありませんが、スクロールが必要な多くの場合に役立ちます。 –

+2

ええ、私は既にテキストを選択しようとするまで、これを(私の質問で)私がうまく使っていたものとして言及しました。 – rewolf

+0

ああ、私は完全に質問を誤読し、答えを探しているので忙しかったです。申し訳ありません私の悪い – Samuel

2

あなたが使用している現在のコードを投稿する場合は、より良い回答を得るでしょう

html 
{ 
    overflow: hidden; 

} 
+1

これは、スクロールバーを非表示にし、本体がスクロールできないという誤った感覚を与えるため、実際には危険です。これにより、ユーザーが選択したテキストをドラッグしたときにページがスクロールするのを防ぐことはできません。 –

関連する問題