ページ全体をスクロールしながら React でコンテンツの内部スクロールを実装する方法

ページ全体がスクロールされたときに最初に子コンテンツをスクロールするロジックを React で作成したいと考えています。サブコンテンツが完全にスクロールされると、次のセクションに移動します。例: A、B、C の 3 つのセクションがあります。各セクションの高さは 100vh です。パート B には、B1、B2、B3、B4 の 4 つのサブパートが含まれており、これらもすべて高さ 100vh です。ページをスクロールする場合、セクション B までスクロールすると、そのサブセクションのスクロールが開始されます。サブセクションが完全にスクロールされると、スクロールはセクション C に移動します。GS...

P粉823268006 2023-09-06 18:19:42 0  1  540

javascript - CSS グローバル スタイルを動的に変更するために JS を実装する方法

ページ内の CSS グローバル スタイルを動的に変更する場合 (たとえば、ページ上のすべてのフォントの色を赤に変更する場合)、css {code...} を使用してこれを実現できます。js を使用する場合は、ボタンを使用します。ページ内ですべての要素のスタイルを変更します。つまり、js をクリックすると、ページ上のすべての要素のスタイルとフォントの色が動的に赤に変更されます。

阿神 2017-05-19 10:11:38 0  3  653

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

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

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

CSS 行クラスにより、一部の要素がフレーム外になりますが、要素は静的で表示の下部に固定される必要があります。

現在の私のページはこんな感じです。 2 つの要素が隣り合うように行クラスを追加すると、下部のナビゲーション バーがスクロールする必要がある位置まで押し下げられます。ここでは、行要素のない別のページが表示されます。ナビゲーション リンクがディスプレイの下部に完全に固定されています (植物と部屋のナビゲーション要素はリマインダー タブ (画像 1) に表示されるべきではないため、この要素は無視してください (画像 2)。ページはスクロール可能で、ナビゲーションバーが正しい位置に保たれますが、要素のアウトラインが正しくありません。すべての緑色のボックス表示は、編集ボタンと削除ボタンとともに重ねて表示...

P粉156415696 2024-04-03 18:48:12 0  1  452

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

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

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

JavaScript - 右側のメニューがターゲット位置を正しく見つけることができません。つまり、サブメニューが消えた後もマウスが元の位置に留まります。詳細については、画像を参照してください。

これが私のマウスの現在の場所です。次に、マウスをカルチャー センターに移動したいと思います。下の図では、上のサブメニューが格納される必要があることを示していますが、マウスの位置は格納されず、信用監視メニューにスライドします。カルチャー センターに戻りたい場合は、今すぐクリックすることしかできません。マウスを上に移動します。これはユーザー エクスペリエンスに影響しますが、できるのは...

曾经蜡笔没有小新 2017-05-19 10:28:27 0  1  398

ブレンドモードで特定の背景を無視するにはどうすればよいですか?

下の画像を見てください。 ブレンド モード: 差分で、下部にある青い四角形がゆっくりと上部に移動していると想像してください。赤いストライプを無視して、それを通過するときは青のままにしたいのですが、緑のストライプ上にある場合は Blend ブレンド モードを使用します。どうすればいいでしょうか？

P粉418351692 2023-09-15 10:20:50 0  1  616

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

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

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

Androidはアプリを開かずにヘッドフォンの抜き差しを監視します

今求められているのは。携帯電話の電源を入れた後、またはアプリを開かずに、ヘッドフォンの抜き差しを監視します。さまざまな操作を実行します。現在の考えは、です。起動後にサービスを開始し、サービス内でのヘッドフォンの抜き差し状況を監視します。ヘッドフォンが接続されている場合は、アクティビティを開きます。それ以外の場合は、現在のアクティビティを閉じます...

漂亮男人 2017-06-24 09:42:57 0  2  1116

HTMLタグ内のノードを取得するにはどうすればよいですか?

クリック イベントを使用する場合、イベントを使用して現在のノードを見つけることができます。ただし、イベントがバインドされていない場合、p タグで現在の p ノードを取得する方法 {code...} 私の要件は、スクロール バー {code...} を介して別のノードにスクロールするときに v-show=true を使用することです。 } .} {コード...}

曾经蜡笔没有小新 2017-05-19 10:34:54 0  4  782

android - Fragmentをスタックにプッシュするとポップ時にポップアニメーションが追加されますが実行できないでしょうか？

場合によっては、popfragment 中にアニメーションを実行したくない場合があります。これを実現する方法はありますか? 使用中は、フラグメント a から b を開き、次に c を開きますが、終了するときに、c から b に移動し、次に a に移動する必要がある場合があります。このとき、アニメーションが必要ですが、場合によっては...

某草草 2017-05-16 13:27:04 0  1  563

CSS: テキストの横にアイコンを配置するにはどうすればよいですか?

このような親 div 要素 (display:flex) があり、テキスト - スパン要素 (i) アイコン - div 要素の 2 つの子要素が含まれています。テキストが 1 行のみ (折り返しなし) の場合は、すべて正常に機能します。ただし、折り返す場合（2行以上）、要素の幅は最も太い行に基づいて調整されるため、長さが長い場合はテキストを折り返すようにしたいと考えています。上の例では、(i) アイコンを NORTH の隣に置きたいと思います。 (i)のアイコンをNORTHの横に置きたいです。

P粉668146636 2023-08-17 14:39:36 0  1  501

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

ホバー時にアニメーションを一時停止し、マウスが離れるとアニメーションを継続する方法

私はいくつかの解決策にうんざりしましたが、これが私が得た最も近い解決策です。しかし、この結果にはまだ満足していません。マウスが要素から離れると、要素は元の回転に戻ってしまうからです。要素の上に移動すると、マウスが要素から離れた場合でもアニメーションがトリガーされるという考えです。要素の上にマウスを移動すると、アニメーションが再生されて 0 度に留まり、マウスが離れると別のアニメーションが再生され、回転して -8 度に戻ります。 consstelements=document.getElementsByClassName('rota

P粉786800174 2024-04-01 09:43:54 0  1  488

JavaScript - 画像表示のスクロールの問題

写真、スクリーンショットの一部など、25 枚の写真がある場合、これらの写真はすべて UL 内に収まります。初期画面では10枚の写真が表示されますが、詳細ボタンをクリックすると10枚すべてが上にスクロールして非表示になります。下にスクロールすると10枚の写真があります。一度に表示できる画像は 10 枚までです。もう一度クリックすると表示されます...

習慣沉默 2017-05-19 10:27:01 0  4  969

mongodbでは、mapReduceの一部の値がreduceで処理されません。

mongodbでmapReduceを使用すると、一部の値がreduceで処理されず、非常に混乱します。まずコード {code...} に移動します。出力されるべきデータは {code...} です。実際の出力データは {code...} です。非常に混乱しています。条件のキーが出力されたとき4未満の場合は正常に表示されますが、それより大きい場合は...

大家讲道理 2017-05-17 10:04:04 0  1  649

Chrome ではスクロール機能に問題が発生することがあります

サイトでスクロールの問題が発生していますが、その理由がわかりません。 Chrome のみでスクロールが機能しないことがあります。作成したすべてのコードを無効にしてみましたが、問題は解決しません。 Safariではスクロールも問題なく動作します。 https://mirkomina.com/ 問題を引き起こす具体的なものはないようです。つまり、カーソルを離れると問題が発生する特定の場所が見つかりません。自分が書いたコードをすべて削除し、スクリプトを無効にしてみました。

P粉817354783 2024-03-29 00:21:20 0  1  450

タイトルは次のように書き換えられました: CSS3 の 100vh 値はモバイル ブラウザでは固定されていません

非常に奇妙な問題があります...私が遭遇するすべてのブラウザーとモバイルバージョンで、次のような動作が発生します。ページをロードするとき、すべてのブラウザーにはトップメニュー（アドレスバーの表示など）があり、ページのスクロールを開始すると、それは上に滑り上がります。場合によっては、100vh はビューポートの表示部分でのみ計算されるため、ブラウザ バーが上にスライドすると、100vh が (ピクセル単位で) 増加し、寸法が変更されたため、すべてのレイアウトが再描画およびサイズ変更されます。効果が良くない場合、この問題は発生しますか？ビューポートの高さについて初めて聞いたとき、とても興奮しました...

P粉682987577 2023-08-21 16:49:22 0  2  515

JS は 2 つの DOM の onclick イベントを交換できますか?

自分のウェブサイトの代わりにブラウザを作りました。一部の操作はフックする必要があります。 JS についてはあまり詳しくありません。 2 つの要素のクリック イベントを交換することはできますか? Baidu は関数名がすべてわかっている場合にバインドしますが、関数名が不明な場合、要素のクリック イベント関数名を取得するにはどうすればよいですか?

曾经蜡笔没有小新 2017-06-10 09:47:39 0  2  572

REACT - ポストブラウザボタンでのページの再レンダリングを回避します。

多くの製品を表示するカタログ ページがあります。ユーザーが下から選択できる製品の 1 つ (たとえば、製品番号 1000) をクリックすると、別のページに移動して内容などを確認します。ボタン ブラウザがカタログ ページに戻ると、すべてが再度表示されます。これは当然のことですが、前に選択した製品にスクロール バーを配置するのに時間がかかります。ユーザーがページの上部で特定の製品 (たとえば、製品番号 4) を選択すると、すべてが正常に動作しますが、ページの下部に移動すると、シナリオが開始されます。 REACTでこのディレクトリページをキャッシュする方法はありますか

P粉733166744 2024-03-27 14:50:53 0  1  473