使用主滚动条滚动页面中的所有元素答案

【问题标题】：Use main scrollbar to scroll all elements in the page使用主滚动条滚动页面中的所有元素
【发布时间】：2020-11-13 21:15:50
【问题描述】：

<html>
<head>
    <style>
        html {
            overflow: scroll;
        }

        table {
            width: 500px;
            display: block;
            background: gray;
            margin: 0 auto;
        }

        tbody {
            overflow: auto;
        }

        td {
            padding: 50px;
        }

    </style>
</head>
<body>
<table id="results_body">
    <tbody class="content" style="display: block;">
    <tr>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>


        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>


        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>


        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>


        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
    </tr>
    <tr>


        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
    </tr>
    <tr>


        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
    </tr>
    </tbody>
</table>
</body>
</html>

表格的水平滚动条不在视图中时的问题（如所附的sc所示）滚动表格不方便。我想要实现的是允许用户使用主滚动条（主体滚动条）滚动页面中的所有内容，包括表格或保持视图中的水平滚动条，这有点棘手，因为我会有很多 tbody而且我无法将它们包装在div 中。提前谢谢你

【问题讨论】：

标签： javascript html jquery css frontend

【解决方案1】：

不要在表格中设置滚动条。将其设置在 html 正文中。

body {
            overflow: auto;
        }

【讨论】：

如果我从tbody 中删除overflow:auto，那么页面上的内容就会溢出，不会仅限于表格。
查看此处了解表格单元格的正确样式以在stackoverflow.com/questions/39366433/…中显示内容
这不是我想要实现的，我的意思是说我有三个不同的tbody 可以水平滚动，我想使用主html滚动条滚动一次全部 3 个tbody