CSS 要素のエッジがスクロール ボックスのエッジの「外側」にあるとはどういう意味ですか?

次の仕様をどのように解釈するのが正しいでしょうか? 「要素エッジ A と要素エッジ B が両方ともスクロール ボックス エッジ A とスクロール ボックス エッジ B の外側にある場合は、何もしません。」 出典: https://drafts.c​​sswg.org/cssom-view/#dom -scrollologicalposition-nearest: ~:text=If%20element%20edge%20A%20and%20element%20edge%20B%20are%20b

P粉763748806 2024-01-16 23:45:09 0  1  534

ページ上の要素のオーバーフロー部分までスクロールできません

ページのサイズを変更すると、要素がビューポートの上にオーバーフローし、上にスクロールして表示できなくなります。解決策のある質問を見つけましたが、うまくいきませんでした。 2 つの「コア」非表示 div と、すべてのコンテンツを含む 1 つの div 要素があります。 「container」div が存在するのは、この問題を解決しようとしているためです。 .container{位置:固定;上:0;左:0;幅:100%;高さ:100%;Z-インデックス:500;}.main-co

P粉041881924 2023-08-30 21:41:10 0  2  615

JavaScript - スクロール イベントでバブリングを防止できないのはなぜですか?

要件は、マウスがページ上のスクロール バーのある要素内にあるときに、本文のスクロールが同時にトリガーされないようにスクロール イベントをトリガーすることです。率直に言うと、マウスが div 内でロールすると、たとえ div が最後までスクロールしても、本文はスクロールしません。バブリングを防ぐために div にスクロールイベントを与えました。このアイデアを活かしたいのですが…

PHP中文网 2017-07-05 11:07:59 0  6  4263

要素のスクロール位置のパーセンテージを計算するにはどうすればよいですか?

ウィンドウ内の要素のスクロール位置をパーセンテージとして計算したいと考えています。 0% は要素の上部がウィンドウの下部にある場所 (まだ表示されていません) 100% は要素の下部がウィンドウの上部にある場所 (すべての要素が表示されています) 近いですが、私が数学で何か間違ったことを考えていることはわかっています。複数の要素のスクロールのパーセンテージを示す小さなデモを作成しましたが、パーセンテージはすべて間違っています。 functiongetElemScrollPercent(selector){constscale=0.1;constel=document.quer

P粉786800174 2024-04-03 19:55:00 0  1  639

JavaScript - 要素が画面の表示領域の一番下までスクロールしたかどうかを確認するにはどうすればよいですか?

要素はもともと画面の表示領域の下部に配置されていましたが、スクロール バーが上にスクロールしたときに要素が画面の下部に触れたときに、要素が画面の下部に接触したときに関数をトリガーしたいと考えています。では、画面に接触している要素をキャプチャするにはどうすればよいでしょうか? 下部の状況はどうでしょうか?

给我你的怀抱 2017-05-19 10:26:18 0  3  766

JavaScript - ページスクロールバーが表示されたときにページがジャンプしないようにする方法

ページ スクロール バーが表示されたときにページがジャンプしないようにする方法 前提条件: 1. ie8+2 と互換性があり、ページの高さはコンテンツによって異なります (つまり、高さが固定であるかどうか) 問題: スクロール最近のブラウザのバーはデフォルトで overflow:auto タイプですが、右側に要素 (.tips{ {code...} }...) を定義する必要があります。

迷茫 2017-06-26 10:54:16 0  1  923

Vue 3 で指定された要素の変数へのスクロールを実装するにはどうすればよいですか?

純粋な JavaScript に要素までスクロールする次の関数があります。このコードを Vue3 に変換したいと考えています。 varsource=''functionshowScrollInto(currentLocation,toLocation){source=currentLocation//パーツを非表示にした後に返される位置 document.getElementById(toLocation).style.display='block'do

P粉060528326 2023-08-28 20:17:07 0  1  619

scrollIntoView() がコンテナをページの先頭までスクロールしないようにします

スクロールスナップを使用するが、現在表示されているスライドを制御するためのナビゲーションボタンも備えた、単純な「主にCSS」画像カルーセルを構築しようとしています。私が見つけた唯一の解決策は、ターゲット要素でscrollIntoView()を使用することです。これは私が望むことを実行しますが、ターゲット要素を常にページの先頭までスクロールします。ターゲットのカルーセル スライドとコンテナーを元の位置に維持し、スライドを水平方向にスクロールして表示したいだけです。 AdamArgyle の例を見ていたところ、彼はこれを実行し、コンテナは元の位置に留まりました、わかりません

P粉690200856 2024-03-26 20:25:28 0  1  489

CSS の背景のグラデーションがページ全体をカバーしません (スクロール可能なコンテンツを含む)

HTML ドキュメントの CSS 背景のグラデーションで問題が発生しています。線形グラデーションを背景として使用し、body要素に設定するページをデザインしました。私が直面している問題は、スクロールするコンテンツがまだあるにもかかわらず、グラデーションが最初に画面が終了する場所で終わっているように見えることです。したがって、下にスクロールすると、グラデーションの 2 番目のインスタンスが最初から始まっているように見えます。これは私の現在の CSS (SCSS) コードです: @importurl('https://fonts.googleapis.com/css2?family=Poppins...

P粉506963842 2023-09-12 13:20:09 0  2  705

getElementById を使用する IntersectionObserver のルートは常に null です

Angular プロジェクトで、IntersectionObserver のビューポートを DOM の特定の部分に制限したいと考えています。 ID を使用してルートとして使用する要素を定義します: <divid="container"><divclass="page-list"><infinite-scroll-page(scrolled)="onInfiniteScroll()

P粉501683874 2024-03-29 00:07:25 0  1  411

javascript - キャンバスを使用して電子署名を実装し、キャンバス内にマウスの座標を配置します

キャンバスを使用して電子署名を実装しようとすると、キャンバス内のマウスの座標が正確に取得できません。 {コード...} ev.clientYを使用してマウスの座標を取得しますが、canvas.offsetTopは親要素から高さを取得します。そして、キャンバスはスクロールバーのある形式になっているので...

巴扎黑 2017-05-16 13:36:00 0  1  611

ページタイトルとページアンカーが重なる問題の解決策

HTML ページの上部に固定され、高さが定義された非スクロール ヘッダーがある場合: URL アンカー (#fragment パーツ) を使用して、ブラウザーをページ内の特定の位置までスクロールさせる方法はありますか? JavaScript の助けを借りずに固定要素の高さを依然として尊重しますか? http://example.com/#bar エラー (ただし一般的な動作): 正しい: +---------------------------- -- ---++---------------

P粉521748211 2023-08-21 19:18:36 0  2  574

スクロール イベント リスナーが要素に追加されましたが、scrollTop が 0 に等しくない場合にのみ正しく移動します

そこで、完了済みタスクとアクティブなタスクという 2 つのリストがあるこの小さなスクリプトを作成しました。ボタンをクリックするとタスク リストを切り替えることができ、[詳細情報] をクリックするとタスクの詳細を読むことができます。 「詳細情報」をクリックすると、新しい div 要素が作成され、そのホスト要素の Y 位置を追跡したいのですが、途中まで機能します。これは次のようになります: ここに画像の説明を入力してください これはバグです。スクロール可能な要素のscrollTopが0でない場合にこのエラーが発生すると確信しています(これは正しい方法で作成されており、スクロールを開始するとすべて上...

P粉427877676 2024-04-01 11:03:26 0  1  621

Tab キーを使用してページ上の HTML 要素を移動します

Tab キーを使用している HTML ページで、Tab キーを使用してスクロールできません。これは、「テーブルを更新できません」ポップアップが開いたときにタブを参照しようとしているページの写真です。それをクリックしてタブを押しました。初めてタブを押すと、フォーカスが画像内の矢印要素に移動します。しかし、次にタブを押すと、要素 Page3 に移動します。上矢印アイコンは HTML で選択されている <i タグで、次の <i タグは x ボタンです。何らかの理由で、2 番目の <i タグがスキップされ、タブ キーが 2 回目に表示されたときに x ボタンに移動しません。これはそう...

P粉106301763 2024-02-03 21:30:59 0  1  473

HTML で要素のカスケード効果を実現するにはどうすればよいですか?

この要素のカスタム ツールチップを作成したいのですが、ツールチップを表示する十分なスペースがないボックス内に含まれているため、トリミングされてしまいます (オーバーフローが自動に設定されているため、実際にはスクロールして表示できますが、スクロールせずに表示したい）。境界を超えて表示する方法はありますか? z-indexを使用してみましたが、役に立ちませんでした。これを私は次のように呼んでいます: .box{width:100px;height:100px;overflow:auto;bor

P粉486138196 2023-08-28 16:39:50 0  2  580

「一番上にスクロール」ボタンを使用すると、ページの下部に余分な空白が作成されます

いくつかのチュートリアルに従って、CSS ベースのトップへのフローティング スクロール ボタンを作成しました。ただし、最後の HTML 要素 (最後の行など) の下に余分な空白があることに気付きました。余分な空白の高さはボタンの高さ (50px) と一致します。また、arrowUpdiv タグを囲むために追加の div タグを追加してみました。ギャップは減少しましたが、小さいながらも目立つ空きスペースがまだ残っています。余分な空白を避ける方法があるかどうか疑問に思ったのですが? #arrowUp{位置:スティッキー;幅:

P粉226642568 2023-08-13 19:52:48 0  1  557

Vite React プロジェクトを保存するたびに、既存のキャンバス要素を置き換えるのではなく、新しいキャンバス要素がページ本文に追加されるのはなぜですか?

ThreeJs の学習を始めようとしています (JavaScript Web 開発も初めてです)。いくつかのチュートリアルを見た後、Vite と React から始め、次に基本的な回転立方体から始めました。この部分は機能します。しかし、vite について読んだところによると、作業中のファイルを保存するだけでページに再ロードできるはずです。しかし実際にはそうではありません。ページのコンテンツを確認したところ、ファイルを保存するたびに、(既存のキャンバス要素を置き換えるのではなく) 2 つの同じキャンバス要素がページ本文に追加されます。つまり、それを確認するにはページの一番下までスクロールする必要...

P粉186904731 2024-03-30 09:57:49 0  1  532

タイトル変更: div 列と残りの幅を修正

すべての列がブラウザウィンドウの高さ全体になる、5 列のレイアウトを作成しようとしています。中央の列を除いて、他の列は固定され、ブラウザ/ドキュメントがスクロールされたときに移動しないようにする必要があります。中央の列には Web サイトのコンテンツが含まれており、垂直方向にオーバーフローするため、ブラウザーでは通常どおりスクロールする必要があります。それとは別に、中央の列を除くすべての列は固定幅を持っており、中央の列が残りのスペース（親要素の100％の幅）を占める必要があります。要件の1つは、フレックスボックスまたはCSSグリッドを使用しないことです。以下のコードは私が得たものです。列「c」...

P粉786432579 2023-09-14 17:17:47 0  1  666