これを理解しようとしていますが、良い解決策を思いつくことができず、Fancybox が既にこの解決策を取得していることを確認できませんか? 私が間違っている場合は修正してください。
問題: ユーザーがいくつかの手順 (新しいページ) を通過する iFrame を開く Fancybox があります。それらの中には、かなり多くのコンテンツがあり、スクロールバーが表示されるものもあれば、表示されないものもあります。問題は、Fancybox がスクロールバーの幅を考慮しておらず、x-scrollbar も表示されることです。
ソリューション
- Fancybox の幅を + 20 程度に設定できますが、これはスクロール バーのサイズとほぼ同じですが、すべてのブラウザーではそうではありません。
- Overflow: hidden をどこかに追加することもできますが、それではコンテンツがトリミングされすぎてしまいます。
- スクロールバーが邪魔になっているかどうかを判断するために、JSを自分で書くことができました。
- または、overflow-y: scroll を追加することもできます。これにより、常にスクロールバーが表示されますが、すべてのブラウザーで奇妙な間隔が表示されるわけではありません。
それは私が考えることができるいくつかの解決策ですが、どれも良いものではありません。あなたたちはどうしますか？
EDIT Rlemon とのチャットの後、固定幅要素を持つコンテンツの周りにコンテナーを配置し、overflow-x: hidden を body に設定することにしました。固定幅の要素が内側にあり、表示されていることがわかっているため、多すぎるものは何でも非表示にできるということです。