私がmp3の音声ファイルを投稿して、mstdn.jp で確認したら、スクロールブロックが再現された。
mp3の音声ファイルがある投稿のすぐ下の投稿でブロックされるわけじゃないんだ…。
mastodon.social で問題が生じないのは、自分の投稿だったから、というわけではなかった。いしい@試行錯誤の投稿にあるmp3でも問題なかった。
mp3 音声ファイルがマストドンで表示されるかテスト | いしい@試行錯誤
https://ishii00141.stars.ne.jp/20251210-2213-4552/
#Gemini によると、原因は、これではないかと…。これを実現するソースコードも作ってもらった。
"スクロールスナップとは、スクロール操作が完了した際に、コンテンツが自由な位置で停止するのではなく、特定の位置に「吸い寄せられる」ように移動する機能です。通常のスクロール操作では、正確性に欠けます。段落、文章、画像の境界で止まるわけではないからです。例えば、カルーセルでは、スクロール操作が画像の途中で完了し、画像の一部が部分的にしか表示されない状態になることがあります。ウェブ開発者は長い間、 JavaScript ベースの解決策に頼ってきました。最近では、ブラウザーが CSS スクロールスナップ機能に対応し始め、スクロールスナップコンテナーとその動作を定義することができるようになりました。
"
Scroll snap (スクロールスナップ) - MDN Web Docs 用語集 | MDN
https://developer.mozilla.org/ja/docs/Glossary/Scroll_snap
スクロールスナップとは、スクロール操作が完了した際に、コンテンツが自由な位置で停止するのではなく、特定の位置に「吸い寄せられる」ように移動する機能です。通常のスクロール操作では、正確性に欠けます。段落、文章、画像の境界で止まるわけではないからです。例えば、カルーセルでは、スクロール操作が画像の途中で完了し、画像の一部が部分的にしか表示されない状態になることがあります。ウェブ開発者は長い間、 JavaScript ベースの解決策に頼ってきました。最近では、ブラウザーが CSS スクロールスナップ機能に対応し始め、スクロールスナップコンテナーとその動作を定義することができるようになりました。
これは Scroll snap を #CSS で実現する例。マウスホイールで再現することはできなかったが、スクロールバーのドラッグ&ドロップで実感できる。動かす量が少ないと元に戻されてしまう。
横スクロールと縦スクロールの両方が用意されてる。
同じことが #JavasScript デモできる。
"下のボックスでスクロールスナップを確認するには、スクロール可能なビューポート内の 45 個の番号付きボックスのグリッドを上下左右にスクロールしてください。
"
CSS スクロールスナップ - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Scroll_snap