javascript - 一旦响应表在小型设备中可滚动，就显示隐藏的 div

Question

我正在从事的元素中有太多表格。我完成了它们并使它们响应。如果表格不适合任何设备，则表格采用垂直滚动。所有表格的宽度都不同。

例如，

• 表 A 从小于 768 像素的设备获取垂直滚动
• 表 B 从小于 667 像素的设备获取垂直滚动
• Table C 从小于 414 像素的设备获取垂直滚动
• 还有很多....

现在我想显示一条注释，仅在需要滚动时通知可滚动表格。我必须通过对所有表应用不同的类和媒体查询来手动执行此操作。而且我的 table 太多了，太费时了。

是否有任何 CSS 技巧或脚本可以在表格可滚动时显示该注释？

请参阅下面的代码段。这里<p>需要 display:block在 736px 及更低的设备中，因为表格可以在那里滚动。

p{
font-family:arial;
display:none;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #ababab;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

.scrollable {
    overflow-x: auto;
}

@media screen and (max-width: 736px)
{
p{
display:block;
}
}

<div class="scrollable">
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</div>
<p>Note: Scroll above table to see more content.</p>

Answer 1

您可以比较.scrollable 元素和table 的宽度。如果有滚动 - 表格应该比它的容器宽:

var $containers = $('.scrollable');

$containers.each(function() { // in case there are multiple scrollable tables on the page
    var $container = $(this);
    var $table = $container.find('table');

    if ( $container.width() < $table.width() ) {
        $container.addClass('show-notice');
    }
});

根据您的示例更新 CSS:

.scrollable.show-notice p { display: block; }