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  436

mjml テーブルを水平スクロールで強化し、オーバーフローを追加する

mjml を使用して、テーブルを含む電子メール テンプレートを作成しています。また、ヘッダー名が非常に長いため、テーブルが横方向に大きくなりすぎます。青いコンテナ内を水平にスクロールさせたいのですが、実現できません。スクロール可能にするにはどうすればよいですか?これはmjmlのライブコードです

P粉464088437 2024-03-27 22:43:41 0  1  420

水平スクロールバーにのみCSSを適用する方法

私は新しいインターンで、彼らは私に簡単なタスクを与えました: 水平スクロールバーをパーソナライズする このコードはありますが、垂直スクロールバーが消えます... 垂直方向をデフォルトにする必要があります... 水平スクロールの記事のみをパーソナライズする必要があります。 ::-webkit-scrollbar{width:7px;}::-webkit-scrollbar-thumb:horizo​​ntal{border-radius:8px;background-color:rgba(92,92,92,0.5);}など

P粉276876663 2024-04-01 16:25:15 0  2  357

スクロール状態をいじらずに React の div の先頭に追加します

リアクションに困っています。水平スクロールで表示できる多くの子 div を含む、単純なスクロール可能な div を実装しようとしています。基本的に、各子 div は 1 日に対応します。このコンポーネントは、ユーザーが当日と翌日に関する情報を初めて表示するときにロードされます。ただし、ユーザーが（左または右に）スクロールした場合、ある種の「無限スクロール機能」を実装して、より多くの情報を追加できるようにしたいと考えています。新しい子 div を親 div の最後に追加しようとしても、問題はありません。ただし、親 div の先頭に新しい子要素を追加しようとすると (たとえば、ユーザーは最初のいく...

P粉217629009 2024-03-19 19:13:46 0  1  425

JavaScript - better-scroll +vue スクロールの使い方を教えてください

こんな感じですベタースクロールコンポーネントは縦スクロール方式を使用しますが、横スクロールについてはずっと研究していて実装できていませんので、アドバイスをいただければ幸いです。達成したいのは、水平メニューを私がマークしたメニューと同様にできることです

三叔 2017-07-05 10:44:28 0  1  918

ReactJS 設計ロードマップのタイムライン

ということで、やりたいデザインはありました。基本的には、ページの左下隅から右上隅に向かうタイムラインです。さらに、行の間にいくつかの div 要素を配置する必要があります。また、反応性も良くしたいです。具体的には長さは短くなりますが、それでもラインは上向きに目立つようにしたいと考えています。 ReactJS と TailwindCSS を使用してこれを実現する方法について何か提案はありますか?私がインターネットで見つけた例は、オンラインの水平方向と垂直方向のタイムライン スタイルです。曲がったタイムラインの例はありません

P粉563446579 2024-03-29 11:31:47 0  1  366

JavaScript ウォーターフォール フロー レイアウトのスクロールの問題

{コード...} if(checkScrollSlide())を使用するとページがスクロールできません if(checkScrollSlide)を使用するとスクロール可能ですがバグが発生します スクロールバーは常に小さくなります中央。これは完全なコードです {code. ..}

为情所困 2017-05-19 10:32:40 0  2  545

Android 上の React-Native でステータス更新が機能しない

スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2Active を状態に設定し、ソースを切り替えるだけです。 iOS では完全にスムーズに動作しますが、Android ではほとんどまったく動作しません。頻繁にクリックすると変更される可能性がありますが、それは明らかに私が望む動作ではありません。したがって、説明したように、スライド可能な水平ギャラリーconstImageである画像コンポーネントがあります

P粉541551230 2024-04-06 16:54:10 0  1  511

TailwindCSS の切り捨てられたクラスは使用されないため、大量の水平スクロールが発生します

Tailwindstruncate クラスの使用で問題が発生しています: https://tailwindcss.com/docs/text-overflow#truncate これは非常にスマートなユーティリティのように見えますが、ブラウザーはテキストを切り詰めないように何かを行うようです (超長い水平文字も含む)スクロールする場合、これは絶対に望ましくないことです。ブラウザが切り詰められたテキストに対して寛容になるようにするにはどうすればよいですか?

P粉733166744 2024-03-30 18:26:21 0  1  362

スクロールオフセットhtml

HTMLとCSSで何かをしようとしていますが、実際に機能するかどうかはわかりません。スクロールを遅くして柔らかくするなど、スクロール時に何らかの「遅延」を追加するようにしたいと考えています。一部のサイトではこれを行っており、他のサイトとはスクロールの仕方が異なり、ソフトに見えるページもいくつかありました。これは可能でしょうか?

P粉205475538 2023-08-17 23:52:56 0  1  489

Vue の水平スクロール

マウスでアイコンを横にスクロールしたいです。 JavascriptのscrollLeftで試してみましたが、スクロールしても値は変わりません。スクロールすると、deltaY 値のみが 100 と -100 の間で変化します。どこに問題があるか知っている人はいますか?スクロールしてスクロールバーをマウスオーバーすると機能しますが、divコンテナ全体で機能したいと考えています。また、可能であれば依存関係/npm-librariesなしでこれを実行したいと考えています。テンプレート<divclass="iconsfl

P粉755863750 2024-03-25 21:06:27 0  2  469

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

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

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

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

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

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

ブラウザのサイズ変更時に「offsetWidth」値を再同期します

いくつかのサブ項目を持つ水平スクロール div があります。幅によっては、サブアイテムが切り取られる場合があります。したがって、表示される項目が 4 と 1/2 になる可能性があります。そこで、JavaScript を使用して、幅が子を均等に分散するように強制します。 Javascript を使用して .palette の幅を検出し、それを表示する項目の数 (余白を除いた) で割って、各 .swatch に適用します。もっと良い/簡単な方法があるかどうかわかりませんか?これが解決策である場合、ウィンドウのサイズが変更されたときに更新されるように、より責任のあるものにするための支援が必要です。私

P粉463811100 2024-03-29 17:24:18 0  1  418

同じ背の高さの子が入ったオーバーフローコンテナ

利用可能な質問を検索しましたが、解決策が見つかりませんでした。水平オーバーフローコンテナのすべての要素の高さを、最も長い要素の高さと等しくなるように設定しようとしています。 body{}セクション{幅:300ピクセル;背景:ライトブルー;オーバーフロー:自動;ホワイトスペース:nowrap;}div{表示:インラインブロック;最大幅:150ピクセル;背景:ライトグリーン;マージ

P粉207969787 2024-03-22 13:42:51 0  2  672

データ更新表示 - フライト情報などのデータベース内のデータを空港の大型スクリーンに表示する方法

データベース内にn個のデータがあります（リアルタイムで変化する可能性があります）ので、大きな画面に一度に8個のデータを表示したいのですが、Pを自動的にスクロールさせてリアルタイムに表示するにはどうすればよいでしょうか？空港の大型スクリーンにフライト情報のように表示

王 2018-06-14 10:07:14 0  6  2050

グリッド テンプレート領域を使用してグリッドを表示できないのはなぜですか?

グリッドテンプレート領域を介して要素の配置を実現しようとしていますが、機能しません。グリッドシステムを使用してブロックを垂直方向と水平方向に配置しようとしています。左側に画像を使用し、反対側にテキストを使用します。このコードが機能しないのはなぜですか? .news__wrapper{display:grid;grid-template-areas:"aac""bbc";}.news__item{display:flex;align-items:center;just

P粉541796322 2023-09-09 16:28:13 0  1  691

タイトルは次のように書き換えられます: 下部ペースト機能のスクロール効果を実現するには?

ここで見ているものと同様の効果を達成しようとしていますが、各セクションのコンテンツもスクロール可能である必要があります。つまり、セクションの最後に到達した場合にのみ修正されます。たとえば、コンテンツが 200vh の場合、次のようになります。背景:rgb(225,204,200)

P粉587780103 2023-09-09 19:41:49 0  1  565

画面上の CSS センター ポップアップ。コンピューターやタブレットでは機能しますが、携帯電話では機能しません

CSS を使用して、画面中央にヘルプ ポップアップを表示してみてください。私のコンピュータと iPad では問題なく動作しますが、iPhone ではポップアップがスクロール可能な垂直方向のスペース全体の垂直方向の中央に配置されるため、表示するために時々上下にスクロールする必要があります。呼び出されたときに、現在表示されている画面の中央に配置したいと考えています。 (ページの高さは静的ではないことに注意してください。つまり、ユーザーのアクティビティに基づいて伸びたり縮んだりします)。関連する CSS は次のとおりです: .helpcontent{position:fixed;top:50%;le...

P粉662802882 2024-03-28 20:02:46 0  1  345

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

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

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