スクロール ホイールを使用するときにスムーズなスクロール アニメーションを実現する方法はありますか?

ページをスクロールするときに、スクロールホイールを使用したときの「飛び跳ねる」方法ではなく、スムーズに移動するようにしようとしています。私がこれに関連して見たソースのほとんどは、react-scroll が提供するもののように、ボタンまたはリンクをクリックしたときのスムーズなスクロールを伴いますが、私は特にホイール スクロールのスムーズな効果を実現したいと考えています。 MaterialUI テーマを通じてこれを実現する方法はありますか、それともこれに役立つ React パッケージはありますか?

P粉118698740 2023-08-16 16:40:27 0  1  651

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

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

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

JavaScript - スクロール軸で前方スクロールと巻き戻しで異なる効果が生じるのはなぜですか?

スクロール軸が回転すると、指定した位置に到達すると、対応するシリアル番号の色が変わるという効果はそれなりにありますが、スクロールが一番下までスクロールすると、さらにスクロールすると、指定された領域に到達していません。上部で、対応するカラー スケールの色が変わりました。以下に提供したコードから、html:...

某草草 2017-05-19 10:25:51 0  1  701

画像がスムーズに表示されないに関する質問

同じコードがあり、ファイルパスは正しいのに、URL 内の画像が表示されないのはなぜですか?本文に を書くとスムーズに画像が表示されます。

昕旸 2019-04-02 13:57:09 0  3  1047

CSS の問題: 水平スクロール (overflow-x:scroll) が機能しない

「ページ」が 3 つあり、それらを水平にスクロールしたいと考えています。水平スクロールバーは正常に作成できましたが、マウスホイールを上下にスクロールしても何も起こりません。私のコンテナは次のようになります: body.container{width:100%;height:100%;scroll-snap-type:xmandatory;overflow-x:scroll;display:flex;} 完全な HTML+CSS: body{width : 100vw;ヘイ

P粉295616170 2024-03-29 16:06:18 0  1  526

React モードで垂直スクロールできない

React プロジェクトでモーダルを表示しようとしています。モーダルが表示されているときは、useEffect によって本文のオーバーフローを非表示に設定します (そうでない場合は、モーダルの下にメイン コンテンツのスクロールバーが表示されます)。背景コンテンツのスクロールを防ぐには完璧に機能しますが、問題はモーダルでもスクロールできないことです。メインページのコードは次のとおりです: importReact,{useState}from"react";import{render}from"react-dom";imp

P粉760675452 2023-09-16 11:18:16 0  1  1142

iOS safari で上にスクロールすると、一部の Web サイトで上部のアドレス バーが小さくなるのはなぜですか

iOS Safari で上にスクロールすると、一部の Web サイトの上部にあるアドレス バーが小さくなるのはなぜですか?

PHP中文网 2017-05-18 10:57:59 0  3  738

javascript - angularjs シングルページアプリケーション ナビゲーションが一番下までスクロールした後に新しいページにジャンプした後、ページの一番上までスクロールしない問題を解決するにはどうすればよいですか?

ページの一番下までスクロールした後、ナビゲーションが新しいページにジャンプした後、ページの一番上までスクロールしない問題を解決するにはどうすればよいですか?

漂亮男人 2017-05-19 10:42:03 0  1  523

css - div 内部スクロール、Androidにはスクロールバー（非本文スクロール）がないのですが、表示する方法はありますか？

{コード...} このようなコードですが、先頭と末尾が固定され、中央のコンテンツがスクロールされます。中央の高さを 100% にして先頭と末尾を固定すると、先頭にスクロール バーが表示されます。そして尾​​、これは許可されていません（おい）。したがって、この場合、-webkit-overflow-scrolling: touch; を見つける前に、

PHP中文网 2017-05-16 13:22:11 0  1  775

オーバーフロー: スクロールすると、テーブルの非表示の列が表示されなくなります。何が悪かったのか？

私は、react-grid を既存の flask アプリケーションに統合しています。これを行うには、カスタム Webpack 構成を使用してアプリケーションをコンパイルする必要があります。反応コンポーネントを正常にレンダリングできますが、react-grid を使用して overflow:scroll を適用すると、テーブルの表示部分のみがレンダリングされ、残りのスクロール領域は空白のままになります。ここをクリックすると、オーバーフロー スクロールが有効になっている ReactGrid の GIF が表示されます。ここをクリックすると、オーバーフロー スクロールが有効になっていない React...

P粉345302753 2023-08-17 13:55:29 0  1  517

React JS と Lenis のスムーズスクロールで画面を切り替えるときにトップに戻る方法

私は lenis を使用してスムーズ スクロールを実装しており、App.js で使用する ScrollToTop.js ファイルがあります。ページがスクロールしていないときは正常に動作しますが、別のページに移動するボタンをクリックして「スムーズなスクロール」が発生すると、scrollToTop が動作しません。これを修正する方法を知っている人はいますか? ScrollToTop.jsimport{useEffect}from"react";import{useL

P粉662614213 2023-08-18 09:58:58 0  1  761

Ajax を使用したコンテンツの生成 - ID までスクロールできない

ajax経由で取得したデータに基づいてページコンテンツを生成します。私が抱えている問題は、特定の ID までスクロールしたいときに、スクロールが起こらないか、間違った場所にスクロールしてしまうことです。 SO Q&Aを見てきましたが、良い解決策が見つかりませんでした。多くの答えは Angular または React に関するものですが、プレーンな JS については本当に確かなものはありません。たとえば、ユーザーがリンク「About Us -> Project」をクリックしたとします。「About Us」がページであり、プロジェクトはページの最後にある ID にあり、そこにコンテン...

P粉208469050 2024-04-04 09:29:39 0  1  657

スクロール時にスペースが表示されないように、ナビゲーション バーの後ろの HTML と CSS に背景画像を追加してみてください。

ナビゲーションバーとフッターの下にHTMLとCSSで背景画像を埋める方法がわかりません。ナビゲーションバーをスクロールすると、スペースは単なる空白スペースになります。上下にスペースなしでスクロールしたいのです。ありがとう！ *{box-sizing:border-box;}body,html{margin:0auto;padding:0;}.background-container{background-image:url("http://placekitten.co

P粉118698740 2023-09-10 09:12:07 0  2  588

スクロール可能なコンテンツの高さを動的に調整する (Ion Page、React)

ionicReact ページに非常に大きなテキストが含まれているため、ページ全体を埋めるのではなくスクロールさせたい場合は、次のスタイルが非常に役立ちます: <divstyle={{overflow:'auto',flex: '11auto', height:'200px'}}>SomeText</>しかし、たとえば次のようなコンテンツとフッターを含むページがあるとします。<IonPage

P粉478835592 2023-09-07 18:08:44 0  1  691

JavaScript - 次の部分がスクロールしないようにするにはどうすればよいですか?

アプリに初めて入った h5 ページですが、黒いマスクをドラッグしたときに下のページがスクロールしないようにするにはどうすればよいですか?

为情所困 2017-05-19 10:27:44 0  2  608

ウィンドウ内のコンテンツがオーバーフローするとスクロールできなくなり、新しいコンテンツが非表示になります

私は現在ルーレット システム プログラムを構築しており (これは賭けをするというよりも賭けを阻止するためです!)、基本的なフレームワークを実行しているだけですが、すでにメイン ウィンドウ "#results" がフルにスクロールしないという問題が発生しています。結果の。スクロールはコンテンツの最新行に従う必要があるため、モーダル ボックスへの入力から返された最新のコンテンツは常に下部に表示されます。私は何時間もかけて考えられる解決策をたくさん調べましたが、役に立ちませんでした。コードは次のとおりです: (スクリプト全体が長くなったことをお詫びします) <!DOCTYP...

P粉106715703 2024-04-03 21:24:55 0  1  569

モバイル Safari でスクロールしてもアドレス バー/URL バーが変化しない

React (16.8.6) を使用して Web サイトを構築していますが、モバイル Safari では、ユーザーがスクロールを開始しても、他の Web サイトのように URL バーが折りたたまれたり縮小されません。ラッピング div の CSS は次のようになります: {...otherComponentsHere}constContentContainer=styled.div`height:100%;/*ブラウザ ウィンドウの高さ全体を 2 つの列で占有できるようにします*/overflow-y:auto;flex -成長: 1;di

P粉768045522 2023-08-16 12:29:00 0  1  599

ウィンドウのサイズを変更するときにスムーズな遷移マージンの割合を実現する方法

要素の周囲にパーセンテージのマージンを、ビューポートが小さい場合はビューポート幅の 5%、ビューポートが大きい場合はビューポート幅の 15% に設定したいと考えています。メディアクエリを使用して、次のようにマージンの数値を切り替えることができます: .element{margin:5%;}@media(min-width:800px){.element{margin:15%;}} ただし、ウィンドウ サイズが変更されると、パーセンテージは、ある値から別の値に突然変化するのではなく、スムーズに変化します。次のようなものがうまくいくかもしれないと思います: @m

P粉155832941 2023-09-12 18:47:54 0  1  635

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

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

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

javascript - iframe Web ページを読み込むときにスクロール バーがこのように表示されるのはなぜですか?

すみません、iframe で大きなページを読み込むと、最初に小さなスクロール バーが表示され、その部分だけが表示され、その後すべてを表示するのに時間がかかるのはなぜですか。すべてを直接表示する方法はありますか。それはとても醜いです？ 。 。

仅有的幸福 2017-05-16 13:26:44 0  1  561