滚动div，溢出没有JavaScript

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

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

这可能吗？

来源

2010-02-12 GhassanPL

正如一个注释：PHP是一种服务器端语言，因此不会以这种方式影响客户端渲染。 – 2010-02-12 18:10:07

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

您可以在可滚动div的底部放置锚定标记，然后使用HTML页面中的元刷新标头来请求重定向到此锚点。在这种情况下，浏览器不应该触发真正的页面刷新，因为只有散列部分会发生变化。它应该简单地滚动到div底部的锚点。

在谷歌浏览器4.0，火狐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和锚标签。

我也使用Safari在iPhone上测试了上述内容，并且它看起来工作正常。

不过，我不得不说，在移动浏览器中没有任何内部滚动的情况下渲染完整的div内容可能是一个更好的主意。移动浏览器中的多个滚动条似乎不太适用。

来源

2010-02-12 17:45:46

这是一个天才解决方法。 – 2010-02-12 19:21:35

你是我的英雄。 – metrobalderas 2010-02-13 00:57:14

非常聪明，这是一个很好的解决方法。请注意，元刷新虽然会为浏览历史记录添加条目，但有时尝试点击返回上一页可能会很麻烦。我通常倾向于避免以这种方式劫持我的后退按钮的网站。干得好:-) – 2010-02-13 09:17:02

滚动div，溢出没有JavaScript

回答

相关问题