HTML 中长 Matjax 方程的水平滚动条

Question

我有以下 MWE：

<!DOCTYPE html>
<html>

<head>
    <title>I want long equations to be scrollable individually</title>
    
    <meta charset="utf-8">
    
    <!-- Math support https://www.mathjax.org/#gettingstarted -->
    <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\(', '\)']]
      },
      svg: {
        fontCache: 'global'
      }
    };
    </script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <style>
        .equation {
            display: table;
            width: 100%;
        }
        .equation__content, .equation__number {
            display: table-cell;
        }
        .equation__content {
            width: 90%;
        }
        .equation__number {
            text-align: right;
            font-family: serif;
        }
    </style>
</head>

<body>
    
    <p>Here we have a small equation which works perfectly:
    
    <div class="equation">
        <equation class="equation__content">
            $$E=mc^2$$
        </equation>
            <div class="equation__number">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1)</div>
    </div>
    
    Now, the following is a very long equation:
    
    <div class="equation">
        <div class="equation__content">
            $$\frac{dF}{dx}\frac{dx}{dy}\frac{dy}{d\xi}=\intop_{\mathbb{R}}f(\zeta)e^{-\zeta}\cos(w^{2}-\zeta)\ d\zeta+\frac{3x^{3}+(\nabla\times\boldsymbol{E})\cdot\boldsymbol{B}}{\vec{r}\cdot\vec{E}}+8\pi\hbar+\log\cos\tan\sin\pi$$
        </div>
            <div class="equation__number">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2)</div>
    </div>
    
    which produces a "global horizontal scrollbar" for the <code>body</code> element. I would like to keep the <code>body</code> without scrollbar and add a small scrollbar only to long equaitons.
    </p>
    
</body>
</html>

这会产生一个像这样的“全局”滚动条（您可能必须减小 window 的宽度）：

我想改用这个：

到目前为止，我已经尝试了几乎所有在 Google 中找到的答案，但都没有成功。例如

.equation__content {
    width: 90%;
    overflow-x: scroll;
}
body {
    overflow-x: hidden;
}

我避开了全局滚动条，但我没有得到本地滚动条。我已经尝试了 .equation__content 中 overflow-x 的所有选项，其中 none 有效。

是否可以如我所愿？（我希望这是因为 Stack Overflow 将其用于代码块，每个代码块在需要时都有自己的“本地滚动条”。）

Answer 1

其中一种方法是对您的公式使用 white-space:nowrap;：

.equation-table {
  display: table;
  width: 100%;
  background-color: lightgreen;
  border: 1px solid #666666;
  border-spacing: 5px;
  table-layout: fixed;
}

.equation-table-row {
  display: table-row;
  width: auto;
  clear: both;
}

.equation-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;
  width: 50%;
  overflow-x: auto;
  background-color: lightpink;
  white-space:nowrap;
}

.text-center {
    text-align: center;
}

<div class="equation-table">
      <div class="equation-table-row">
        <div class="equation-table-col" align="center">Some Header</div>
        <div class="equation-table-col">Some Header 2</div>
      </div>
      <div class="equation-table-row">
        <div class="equation-table-col">$$E=mc^2$$</div>
        <div class="equation-table-col text-center">(1)</div>
      </div>
      <div class="equation-table-row">
        <div class="equation-table-col">
          $$\frac{dF}{dx}\frac{dx}{dy}\frac{dy}{d\xi}=\intop_{\mathbb{R}}f(\zeta)e^{-\zeta}\cos(w^{2}-\zeta)\
          d\zeta+\frac{3x^{3}+(\nabla\times\boldsymbol{E})\cdot\boldsymbol{B}}{\vec{r}\cdot\vec{E}}+8\pi\hbar+\log\cos\tan\sin\pi$$
        </div>
        <div class="equation-table-col text-center">(2)</div>
      </div>
    </div>

更新：

As mdn says about table-layout: fixed:

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

Answer 2

最后我找到了做我想做的事情的方法如下：

<!DOCTYPE html>
<html>

<head>
    <title>I want long equations to be scrollable</title>
    
    <meta charset="utf-8">
    
    <!-- Math support https://www.mathjax.org/#gettingstarted -->
    <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\(', '\)']]
      },
      svg: {
        fontCache: 'global'
      }
    };
    </script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <style>
        .numbered_equation_container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .equation {
            width: 100%;
            overflow-x: auto;
        }
        .equation_number {
            display: table-column;
        }
    </style>
</head>

<body>
    
    <p>Here we have a small equation which works perfectly:
    
    <div class="numbered_equation_container">
         <div class="equation">
            $$E=mc^2$$
        </div>
        <div class="equation_number">(1)</div>
    </div>
    
    Now, the following is a very long equation:
    
    <div class="numbered_equation_container">
        <div class="equation">
            $$\frac{dF}{dx}\frac{dx}{dy}\frac{dy}{d\xi}=\intop_{\mathbb{R}}f(\zeta)e^{-\zeta}\cos(w^{2}-\zeta)\
            d\zeta+\frac{3x^{3}+(\nabla\times\boldsymbol{E})\cdot\boldsymbol{B}}{\vec{r}\cdot\vec{E}}+8\pi\hbar+\log\cos\tan\sin\pi$$
        </div>
        <div class="equation_number">&nbsp;&nbsp;&nbsp;&nbsp;(2)</div>
    </div>
    
    which produces a "global horizontal scrollbar" for the <code>body</code> element. I would like to keep the <code>body</code> without scrollbar and add a small scrollbar only to long equaitons.
    </p>
    
</body>
</html>

HTML 中长 Matjax 方程的水平滚动条

Horizontal scrollbar for long Matjax equations in HTML

html

css

scrollbar

mathjax