多くの一般的な JS スクロールバー プラグインに欠けている機能である、ブラウザーのデフォルトのスクロール動作のサポートを維持しながら、ブラウザーのデフォルトのスクロールバーを HTML/CSS 置換の背後に隠そうとする JavaScript スクロールバーのスタイル変更ソリューションを含む Web インターフェイスを開発しています。この方法で私が遭遇した唯一の問題は、一部のブラウザーが、プラグインによって作成されたものの上にデフォルトのスクロールバーを表示することを主張し、目的の美学を完全に破壊することです.
この問題を解決するために、スクロールバーを含む要素を div でラップし、overflow: hidden;JS を使用してデフォルトのスクロールバーの幅を検出し、それが制御する要素を配置して、親 div のクリッピング境界の外側になるようにしました。ただし、多くの人が知っているように、要素の下または右の境界を超えて広がるコンテンツはoverflow: hidden、コースが下を横切るテキスト選択や、隠れている親要素のクリッピング境界など、マウスのドラッグ操作中に誤ってスクロールして表示される可能性があります。 (つまり、右にドラッグすると、デフォルトのスクロールバーが表示されます)。
ただし、幸いなことに、このようなシナリオでコンテンツが上または左の境界を超えている場合、この動作は発生しません。これを知って、私は上記のアプローチを継続することを検討していますが、スクロール要素をスタイリングして、スクロールdirection: rtlバーを右から左にフリップし、隠し要素の境界を越えてdirection: ltrから、すべてのコンテンツを含む子要素に適用します実際のすべてのコンテンツの方向転換を無効にします。
この手法により、これまでに実施したすべてのテストで望ましい結果が得られました。ただし、この解決策はあまりにも良いのではないかと思っており、この方法を使用できないスクロールバー配置の CSS 方向に関する致命的なアクセシビリティや互換性の問題を見落としています。
TL;DR: CSS 方向プロパティを使用して要素のスクロールバーの位置を制御するのは悪い考えですか?