html进入页面自动显示,javascript – 自动显示HTML页面的底部而不是顶部

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

html, body {

margin: 0;

}

.wrapper {

display: flex;

flex-direction: column-reverse;

max-height: 100vh;

overflow: auto;

}

Top

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Bottom

边注：

这个解决方案似乎仍然有一些在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; } }

}

Top

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Long content

Bottom