Merge pull request #496 from zenn-dev/fix-offset-negative-margin

不要なスクロールバーが表示されないようにネガティブマージンを相殺する

packages/zenn-cli/articles/304-example-embed-katex.md

@@ -265,6 +265,18 @@ issue: https://github.com/zenn-dev/zenn-community/issues/337
 
 素数全体を2つのグループに分け、$p_1, …, p_k$ を「小さい」素数、$p_{k+1}$ 以降を「大きい」素数と呼ぶことにする。$N$ 以下の自然数で、「大きい」素数で割れる数と、「小さい」素数でしか割れない数に分け、前者の個数を $N_1$、後者の個数を $N_2$ とおく。当然 $N = N_1 + N_2$ である。
 
+## 数式番号を含む数式
+
+issue: https://github.com/zenn-dev/zenn-community/issues/608
+
+数式番号を含む数式に、スクロールバーが発生しないこと
+
+$$
+\begin{align}
+J_w \ddot{\theta}_w &= T - \frac{f}{r} \\
+\end{align}
+$$
+
 ## 折りたたみ
 
 :::details 詳細

packages/zenn-content-css/src/_embed.scss

@@ -56,12 +56,23 @@ span.embed-block {
   margin: 1.5rem auto;
 }
 
+embed-katex {
+  // issue: https://github.com/zenn-dev/zenn-community/issues/327
+  // 横に長い要素がはみ出さないようにはスクロールバーを有効化する
+  overflow-x: auto;
+  // issue: https://github.com/zenn-dev/zenn-community/issues/608
+  // .katex .vlist-t2 に指定されているネガティブマージン（margin-right: -2px）により一部のブラウザでスクロールバーが表示されるため
+  // ネガティブマージンを相殺するパディングを親要素に設定する
+  padding-right: 2px;
+}
+
 // prevent katex overflow
 // for inline $foo$
 embed-katex:not([display-mode='1']) {
-  display: inline-flex; // Don't use inline-block here.
-  overflow-x: auto;
+  display: inline-flex;
   max-width: 100%;
+  // issue: https://github.com/zenn-dev/zenn-editor/pull/216
+  // インライン要素ではいかなる場合でもスクロールバーを表示しない
   -ms-overflow-style: none;
   scrollbar-width: none;
   &::-webkit-scrollbar {
@@ -75,5 +86,4 @@ embed-katex:not([display-mode='1']) {
 embed-katex[display-mode='1'] {
   display: block;
   width: 100%;
-  overflow-x: auto;
 }