gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 00:04:18 25 4
gpt4 key购买 nike

我有一个静态高度的 div,内容使用 overflow: auto 进行裁剪。在常规桌面浏览器上,我使用 javascript 滚动到内容的底部。但是,我需要在移动浏览器或没有 javascript 的浏览器上做同样的事情。不是实时的,而是输出html+css,让浏览器渲染内容的底部。

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

这可能吗?

最佳答案

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

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

以下适用于 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 中似乎出现了类似的问题。我相信这可以通过某种方式解决。一种选择是提供带有 anchor 标记的 URL。

我还在带有 Safari 的 iPhone 上测试了上述内容,它似乎工作正常。

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

关于php - 在没有javascript的情况下滚动带有溢出的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2253756/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com