Question

我有一个我在Android手机上查看的网页。文本的各个段落都很合适，但我有一些对于屏幕来说太宽的表格。

要解决此问题，我想要做的是允许表格水平滚动，并使段落保持不变。所以我使用javascript实现了一个解决方案，你可以在下面看到。然而，虽然这在我的桌面上很有效，但在我的手机上，滚动和javascript运行之间存在明显的延迟。

我想如果我们只使用CSS来实现这一点，那么滞后就会消失。有没有办法只用CSS做到这一点？是否有更高性能的javascript选项？

我目前的实施使用javascript：jsfiddle，screencast

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sodales
libero quis mollis venenatis. Etiam diam metus, posuere in dictum quis, semper
quis orci. Morbi vitae consectetur quam, nec porta odio. Maecenas auctor
molestie ornare. Quisque dictum est eu lorem condimentum, fermentum faucibus
nisl posuere. In hac habitasse platea dictumst. Nullam enim nisl, venenatis
quis nunc ac, interdum aliquet lectus. Fusce tincidunt tempus cursus. Quisque
nec sodales dui. Donec sollicitudin faucibus venenatis. In tortor magna,
placerat et vestibulum id, rutrum sed lacus. Nam ut odio et sapien euismod
pretium.
</p>

<table>
    <tr>
        <td style="min-width:200px; background-color: red;">&nbsp;
        <td style="min-width:200px; background-color: green;">
        <td style="min-width:200px; background-color: red;">
        <td style="min-width:200px; background-color: green;">
        <td style="min-width:200px; background-color: red;">
        <td style="min-width:200px; background-color: green;">
        <td style="min-width:200px; background-color: red;">
        <td style="min-width:200px; background-color: green;">
    </tr>
</table>

<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>

<style>
    p { 
        position: relative;
    }
</style>

<script>
    $(document).ready(function() {
        $(window).scroll(function() {
            $('p').css('left', $(window).scrollLeft() + 'px')
        })
    })
</script>

问题回顾：我上面有一些代码用javascript实现了一个功能。我注意到它的一些性能问题。它可以替换为仅CSS解决方案吗？还是性能更好的？

Answer 1

你可以这样做，这样你就可以通过设置css width属性然后添加overflow来在单个div中滚动：滚动到你的css元素。

只需将表格包装在容器div中即可。然后容器div将具有这种css样式：

.tableContainer {
  width:100%;
  overflow:auto;
}

http://jsfiddle.net/eRh39/2/

水平修复一些HTML

我目前的实施使用javascript：jsfiddle，screencast

1 个答案: