Question

我想向用户展示将网站加载到页面底部的用户，而不是 - 通常 - 顶部。

更具体的示例：我有一个iframe元素，指向带有一些文本的网站。应自动显示此站点的底部。

我怎么能意识到这一点？

Answer 1

使用flex及其flex-direction: column-reverse;

html, body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column-reverse;
  max-height: 100vh;
  overflow: auto;
}

<div class="wrapper">
  Top<br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Bottom
</div>

旁注：

这个解决方案似乎仍然有一些在Firefox / Edge / IE11中无法正常工作的缺陷（它们没有显示滚动条，虽然内容从底部开始），所以这里有一个修复它们直到它们开始行为

下面的代码片段是从this post的另一个答案中获取并清除的，其中还有一些选项可以解决此问题。

/* fix for IE/Edge/Firefox */
var isWebkit = ('WebkitAppearance' in document.documentElement.style);
var isEdge = ('-ms-accelerator' in document.documentElement.style);
function updateScroll(el){
  el.scrollTop = el.scrollHeight;
}
if (!isWebkit || isEdge) {
  updateScroll(document.querySelector('.content'));
}

html, body {
  margin:0;
}
.wrapper {
  display: flex;
  flex-direction: column-reverse;
  max-height: 100vh;
  overflow: auto;  
}

/* fix for hidden scrollbar in IE/Edge/Firefox */
.content { overflow: auto; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .content { overflow: visible; }
  @supports (-ms-accelerator:true) { .content { overflow: auto; } }
}

<div class="wrapper">
  <div class="content">
    Top<br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Bottom
  </div>
</div>

Answer 2

您可以在完成加载事件中使用事件，并将该iframe滚动到底部。为此，您可以查看How to properly scroll IFrame to bottom in javascript。

基本上你的最终代码看起来像这样：

 $(function() {
      iframe.contentWindow.scrollTo( 0, 999999 );
 });

注意：看到你对动画的评论后...这个解决方案会添加一些动画，你无法在指定的条件下摆脱它。如果您可以访问iframe内容和项目内容，则可以找到替代解决方案。

第二个解决方案（尊重您的请求）是使用ajax而不是iframe加载目标页面，解析它，并在页面中仅显示您需要的内容（对于ajax调用，您可以检查http://api.jquery.com/jquery.ajax/，解析...这是你的一部分。）

Answer 3

如果您不想滚动，可以这样做：在页面底部将id设置为html元素。然后在链接#<id_of_element_at_bottom>的末尾添加。

在装载时，broswer将在底部，不确定它是否会被看不见。

iframe检查底部是否有id。

Answer 4

我认为在javascript中实现这一目标的最佳方法是使用简单的代码：

document.body.scrollTop=document.body.scrollHeight;

：d

自动显示HTML页面的底部而不是顶部

4 个答案: