在没有javascript的情况下滚动带有溢出的div答案

【问题标题】：Scrolling a div with overflow without javascript在没有javascript的情况下滚动带有溢出的div
【发布时间】：2010-02-13 08:53:29
【问题描述】：

我有一个静态高度的 div，内容使用overflow: auto 进行剪辑。在常规桌面浏览器上，我使用 javascript 滚动到内容的底部。但是，我需要在移动浏览器或没有 javascript 的浏览器上执行相同的操作。不是实时的，而是以这样的方式输出html+css，以便浏览器渲染内容的底部。

我可以使用的工具：HTML、CSS、PHP。

这可能吗？

【问题讨论】：

请注意：PHP 是一种服务器端语言，因此无法以这种方式影响客户端呈现。

标签： php html css

【解决方案1】：

实际上有一个技巧可以在没有 JavaScript 的情况下实现这一点。

您可以在可滚动 div 的底部放置一个锚标记，然后使用 HTML 页面中的元刷新标头请求重定向到该锚。在这种情况下，浏览器不应该触发真正的页面刷新，因为只有哈希部分会改变。它应该只是滚动到 div 底部的锚点。

以下适用于 Google Chrome 4.0、Firefox 3.5.7、Safari 4.0.4、IE 7 和 IE 8：

<html>
<head>
    <meta http-equiv="refresh" content="0; url=#anchor-bottom" />
</head>
<body>
    <div style="overflow: scroll; height: 100px; width: 150px;">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
        ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
        iriure dolor in hendrerit in vulputate velit esse molestie consequat,
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
        zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
        eleifend option congue nihil imperdiet doming id quod mazim.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis 
        Investigationes demonstraverunt lectores legere me lius quod ii 
        processus dynamicus, qui sequitur mutationem consuetudium lectorum. 
        gothica, quam nunc putamus parum claram, anteposuerit litterarum 
        seacula quarta decima et quinta decima. Eodem modo typi, qui nunc 
        fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer 
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
        veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 
        claritatem. Investigationes demonstraverunt lectores legere me.</p> 

        <a name="anchor-bottom"></a>

        <p>Mirum est notare quam littera gothica, quam nunc putamus parum
        humanitatis per seacula quarta decima et quinta decima. Eodem modo 
        clari, fiant sollemnes in futurum.</p>
    </div>
</body>
</html>

在 Opera 10.0 中测试上述内容时，我发现元刷新有一个小问题，与其他浏览器不同，它显然将 0 解释为无限循环。类似的问题似乎发生在 Windows Mobile 6 的 IE 中。我相信这可以通过某种方式解决。一种选择是提供带有锚标记的完整 URL。

我还在 iPhone 上使用 Safari 测试了上述内容，它似乎工作正常。

尽管如此，我不得不说，在移动浏览器中呈现完整的 div 内容而不进行任何内部滚动可能是一个更好的主意。移动浏览器中的多个滚动条似乎不太好用。

【讨论】：

非常聪明，这是一个很好的解决方法。请注意，元刷新会在浏览历史记录中添加一个条目，有时尝试单击返回上一页可能会很痛苦。我通常倾向于避免以这种方式劫持我的后退按钮的网站。干得好:-)
一个绝妙的解决方案，在现代浏览器上就像一个魅力。太糟糕了，它不能在我想让它工作的一个浏览器上工作：Opera Mini :(