Question

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

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

这可能吗？

Answer 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解释为无限循环，与其他浏览器不同。 IE for Windows Mobile 6似乎也出现了类似的问题。我确信这可以通过某种方式解决。一种选择是提供带有锚标记的URL。

我还在Safari上用iPhone测试了上述内容，看起来效果很好。

尽管如此，我不得不说，在移动浏览器中无需任何内部滚动即可呈现完整的div内容。移动浏览器中的多个滚动条似乎不太可用。

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

1 个答案: