スライダー ボタンの使用例は無数にあります。フォト ギャラリーや車のパーツや色を表示する場合があります。これにより、ユーザーはコンテンツを探索できるようになります。

では、スライダー ボタンを実装するのは難しいでしょうか。実際にはそうではありませんが、意識する必要のある CSS の微妙な点がいくつかあります。element-A に CSS ルールを適用し、element-B から副作用を取得することは、混乱したりイライラしたりする可能性があります。独自のスライダー ボタンを実装するときに発生する可能性のある意図しない副作用と、それらに対処する方法を学習します。

TS、Nextjs、Sass、MaterialUI について理解している場合は、従うと役立ちます。そのスタックに慣れていなくても、JS のクロージャーを十分に理解している場合でも、これを取得できます

この旅の残りの部分では、ペイント ショップがあり、在庫にある 10 種類の美しい色を顧客に表示するとします。どうやって始めますか？

最初に思いつく方法の 1 つは、これらのボタンを固定したいので、固定配置を使用することですよね? まあ、これは期待どおりに機能しません。次に、絶対配置を使用して小さな改善を行いますが、それでも十分ではありません。まだまだ足りない部分があるでしょう。見つけてみましょう！

TLDR ; 正しい実装を確認したいだけの場合は、HTML 修正による絶対配置にジャンプしてください。

コードは、このリポジトリでも確認できます。

先に進む前に、これら 3 つの実装の結果を確認することをお勧めします。ここをクリックしてご覧ください。

固定位置

先に進む前に、それらが何をするかを知る必要がある関数とコンポーネントがいくつかあります。

と の 2 つのカスタム コンポーネントもLeftSliderButtonありRightSliderButtonます。それらのコードと説明を以下に示しますので、今のところ、それらが魔法のように機能する 2 つのクールなボタンであると仮定してください。

get10RandomColorsサプライズサプライズ、10個のランダムな色を提供するこの機能もあります。

では、上記の実装の検討を始めましょう。CSS では、コンテナーは相対的に配置され、スライダー ボタンは固定されています。右ボタンと左ボタンの右と左からの距離はそれぞれゼロです。HTML では、ボタンの間に色を配置しました。

コンテナーの両側にスライダー ボタンを配置する必要があり、コンテンツと共に移動しないようにする必要があります。それはfixedのようですね。固定要素はビューポートへの参照を持っているため、コンテナが上下にスクロールしても同じ位置に留まります。ここで最初の例を確認してください。

ページを上下にスクロールしても、ボタンはウィンドウに対して同じ場所に表示されます。ただし、関連するコンポーネントでのみこれらのボタンを表示する必要があるため、固定位置を使用することは、私たちが求めている解決策ではありません。

絶対位置

このステップでは、絶対配置について見ていきます。結局のところ、これらのボタンは、ページではなく、その位置を決定するときに親を参照する必要があります。

プロジェクトをホットリロードすると、ボタンが親コンテナーにあるため、一見すると機能しているように見えます。それは正しい方向への一歩です！

ちょっと待って… 右のスライダー ボタンをクリックすると、コンテンツが左に移動します。ボタンを動かしたくありませんよね？そうしないと、画面に左のスライダー ボタンがなくなったときに、実際にどのように左に移動するのでしょうか

HTML 修正による絶対配置

私たちの解決策は、CSS から HTML に移行することであることがわかりました。ボタンを HTML の 1 レベル上に配置します。このように、スライダー ボタンのコールバック関数は引き続き移動を処理しますが、それら自体はスクロール領域の一部ではありません。

leftこれらのボタンは、CSS プロパティとを使用して、スクロール可能な領域の両側に簡単に配置できますright。

スライダー ボタン

スライダー ボタンを続けて、魔法が約束どおりに起こることをお見せします。

これらの 2 つのボタンには多くの共通点があり、実際にはすべての違いをブール値に減らすことができます。そのため、2 つの props だけで 1 つの機能コンポーネントを作成します。これらは、現在のボタンが右にスライドするか左にスライドするか、および 3 つの異なる実装を調べるときにどの実装に属するかを示します。

上記のスニペットのすべては、 の最初の数行を除いて理解しやすいはずsliderHandlerです。それも実際には非常に簡単だったでしょうが、3 つの実装のどれをスライドさせているかを区別する必要があります。

変数parentSliderWrapperAddressは、親コンテナーを見つけることができる参照を提供します。はisItSiblingImplementation、兄弟要素としてスクロール可能な領域がある最後の正しい実装のためにスライドしているかどうかを示します。最初のif-elseはスクロール可能な領域を見つけ、2 番目のif-elseはその領域が見つかった場合にスライドします。

色のヘルパー関数

最後に、色を生成する方法を見てみましょう。残念ながら、私たちは実際に在庫を持っていないので、彼らは嘲笑されています. まず、色を生成する関数を作成します。これは次のようになります。

結論

コーディングを続けます。壊し続ける。改善を続けます。

それだけです。今日のために。