Горизонтальная полоса прокрутки для длинных уравнений Матьякса в HTML ⇐ Html

[Anonymous]

У меня есть следующий MWE:

Код: Выделить всё

I want long equations to be scrollable individually





MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};




.equation {
display: table;
width: 100%;
}
.equation__content, .equation__number {
display: table-cell;
}
.equation__content {
width: 90%;
}
.equation__number {
text-align: right;
font-family: serif;
}





Here we have a small equation which works perfectly:



$$E=mc^2$$

     (1)


Now, the following is a very long 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$$

     (2)


which produces a "global horizontal scrollbar" for the body

element. I would like to keep the

Код: Выделить всё

body

without scrollbar and add a small scrollbar only to long equaitons.






При этом создается такая «глобальная» полоса прокрутки (возможно, вам придется уменьшить ширину окна):


Вместо этого я бы хотел получить вот это:


К настоящему моменту я перепробовал почти все ответы, которые нашел в Google, но безуспешно. Например, с помощью

Код: Выделить всё

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

Я избегаю глобальной полосы прокрутки, но не вижу локальной полосы прокрутки. Я перепробовал все варианты overflow-x внутри .equation__content, и ни один из них не работает.
Можно ли сделать то, что я хочу? (Надеюсь, это потому, что Stack Overflow использует это для блоков кода, каждый из которых при необходимости имеет свои собственные «локальные полосы прокрутки».)

Подробнее: https://stackoverflow.com/questions/669 ... ns-in-html