代码之家 › 专栏 › 技术社区 › minty

我怎样才能让桌子的身体滚动,但保持头部固定在适当的位置?

html-table css html javascript

143

minty · 技术社区 · 17 年前

我正在写一个页面,我需要一个HTML表来保持一个设定的大小。我需要表格顶部的标题始终保持在那里,但我也需要表格主体滚动,无论有多少行添加到表格中。想一想excel的迷你版。这似乎是一项简单的任务,但我在网上找到的几乎所有解决方案都有一些缺点。我怎样才能解决这个问题?

18 回复 | 直到 10 年前

Ken Penn 17 年前

我必须找到同样的答案。我发现的最好的例子是 http://www.cssplay.co.uk/menu/tablescroll.html -我发现例子2对我很有效。您必须使用Java脚本设置内部表的高度,其余的是CSS。

Vitalii Fedorenko 11 年前

我发现 DataTables 要相当灵活。虽然它的默认版本基于jquery,但还有一个 AngularJs plugin .

Community Mohan Dere 9 年前

我看到肖恩·哈迪的 excellent solution to a similar question making some edits :

使用类而不是ID,这样一个jQuery脚本就可以在一页上有多个表
添加了对语义HTML表元素的支持,如caption、thead、tfoot和tbody
调整了scrolling div的宽度,使滚动条上升到表格的右边缘
- 在注入的静态表头上使用aria hidden=“true”
- 将原始thead保留在原处,只需使用jQuery和set隐藏即可 aria-hidden="false"
显示了具有不同大小的多个表的示例

不过,肖恩做了重担。也要感谢Matt Burland指出了支持tfoot的必要性。

请亲自到 http://jsfiddle.net/jhfrench/eNP2N/

Chris Marasti-Georg Scott Weinstein 17 年前

您是否尝试过使用thead和tbody,并使用overflow:scroll在tbody上设置固定高度?

编辑:它在firefox中运行得很好(几乎),垂直滚动条的添加也导致了对水平滚动条的需求——真恶心。IE只是将每个td的高度设置为我指定的车身高度。以下是我能想到的最好的:

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>

Jérôme Beau 8 年前

您需要的是:

有一个高度有限的桌子 仅当内容大于滚动窗口时,才会发生as滚动。然而 tbody block 为此:

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2) 使后者成为 块 使它成为一个不相关的元素。这样做的唯一方法是通过 将相同的列宽度强制应用于两个 .

但是, 表格主体 它本身就是一个现在,它不能再表现得像一个 table . 既然你还需要一个 桌子 行为要正确显示列,解决方案是要求每一行显示为单独的行 桌子 s:

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

(请注意,使用此技术,您将无法再跨越多行)。

完成此操作后,您可以强制列宽在两个字段中具有相同的宽度 thead 和 表格主体 . 你不能说:

分别针对每一列(通过特定的CSS类或内联样式),这对于每个表实例来说是非常繁琐的;
th, td { width: 20%; } 例如,如果您有5列),这更实用(不需要为每个表实例设置宽度),但不能用于任何列计数

我更喜欢最后一个选项,它需要添加:

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

观看演示 here this question .

oHo Denis Tulskiy 9 年前

编辑: 这是一个非常古老的答案,在这里只是为了表明它在2000年代曾经得到支持,但由于浏览器在2010年的策略是尊重W3C规范,即使某些功能被删除:带有固定页眉/页脚的滚动表在HTML5之前是笨拙地指定的。

不幸的是,没有一种优雅的方式来处理固定格式的可滚动表 thead / tfoot 因为 HTML/CSS specifications are not very clear about that feature

解释

HTML 4.01 Specification 泰德 设计表尾样式 tbody

表行可以分组[…]使用THEAD、TFOOT和TBODY元素[…]。该部分使用户代理能够支持独立于桌面和脚的桌面滚动。

但是FF 3.6上的工作滚动表功能在FF 3.7中被删除,因为它被认为是一个bug,因为它不符合HTML/CSS规范。看见 this that 关于FF错误的评论。

Mozilla开发者网络提示

MDN可滚动表格的有用提示
see this archived page 或者 current French version

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

然而,MDN也表示 this does not work any more on FF

Mick 16 年前

不确定是否有人还在看这个,但我以前做过的方法是使用两个表来显示单个原始表-第一个表仅显示原始表标题行,没有表体行(或者使用一个空的表体行来验证)。

第二个位于单独的div中,没有标题,只有原始的表体行。然后使单独的div可滚动。

它的div中的第二个表位于HTML中第一个表的正下方,看起来像是一个带有固定标题和可滚动下半部分的表。我只在Safari、Firefox和IE(2010年春季的最新版本)中测试过这一点,但它在所有这些版本中都有效。

它唯一的问题是第一个表在没有正文的情况下无法验证(W3.org validator-XHTML 1.0 strict),当我添加了一个没有内容的表时,它会导致一个空行。您可以使用CSS使其不可见,但它仍然会占用页面上的空间。

Fernando Fabreti 11 年前

它的纯CSS: http://jsfiddle.net/ffabreti/d4sope1u/

所有内容都设置为显示:块,表格需要高度:

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }

Luke Bennett 17 年前

这让我在为我们的应用程序实现这样一个网格时感到非常头疼。我尝试了各种各样的技术,但都有问题。最接近我的是使用jQuery插件,比如 Flexigrid (观看 http://www.ajaxrain.com 但这似乎不支持我所需要的100%宽的表。

我最终做的是自己滚;Firefox支持滚动 tbody 元素,所以我浏览器嗅探并使用适当的CSS(设置高度、溢出等…询问是否需要更多详细信息)来进行滚动,然后对于其他浏览器,我使用两个单独的表来设置使用 table-layout: fixed 它使用一种大小调整算法,该算法保证不会溢出指定的大小(当内容太宽而无法容纳时,普通表将扩展)。通过给两个表相同的宽度,我可以让它们的列对齐。我把第二个包裹在一个卷轴的div集合中,并用一点带边距的小把戏等来获得我想要的外观和感觉。

抱歉,如果这个答案在某些地方听起来有点模糊;我写得很快,因为我没有太多时间。如果你想让我进一步扩展,请留下评论!

Daniel Costa 15 年前

下面是一个真正适用于IE和FF的代码(至少):

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

原始代码 HERE

goneill 15 年前

这是我的选择。它还对页眉、正文和页脚使用不同的div,但在调整窗口大小以及搜索、滚动、排序、过滤和定位时同步:

My CD lists

点击爵士乐,古典音乐。。。查看表格的按钮。它的设置使得即使JavaScript被关闭,它仍然是足够的。

在IE、FF和WebKit(Chrome、Safari)上看起来不错。

Sanuj 14 年前

对不起,我没有。I don’我看不懂对你问题的所有答复。

是的,这是你想要的东西(我已经做了)

您可以使用两个具有相同类名的表来进行类似的样式设置,一个仅具有表头,另一个具有行。现在将此表放入具有固定高度的div中,并使用overflow-y:auto或scroll。

Guy Hollington 13 年前

我对上述建议的主要问题是无法插入tablesorter。js,并且能够将表的标题浮动到特定的最大大小。我最终偶然发现了这个插件 jQuery.floatThead

它也有一个很好的比较页面,显示自己与 similar plugins .

Abhishek Pandey 9 年前

居住 JsFiddle

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}

<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>

Peter 15 年前

如果可以使用JavaScript,这里是我的解决方案

测试地点:Opera、Chrome、Safari、FF、IE5。5( 史诗剧本失败

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

编辑:固定高度。

Deborah 13 年前

我使用javascript(无库)和CSS(表体)来实现这一点 滚动页面, 您还可以保留排序功能。

基本上:

在HTML中,创建容器div以定位表标题行和表体,还可以创建一个“mask”div来隐藏表体
在CSS中,将表格零件转换为块
在Javascript中,获取表格宽度并匹配掩码的宽度。。。收到页面内容的高度。。。测量滚动位置。。。身高

下面是javascript和 jsFiddle DEMO.

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}

matthewpark319 10 年前

对我来说,在我从CSS表中删除宽度之前,与滚动相关的一切都不起作用。最初,表格CSS如下所示:

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}

我一去掉宽度:100%;所有滚动功能都开始工作。

M610 7 年前