我发现了一些相关案例，但没有答案适合我。我的页面有一个很大的水平图像，但我需要从中间开始滚动（只是水平），始终以任何分辨率滚动。var body = document.body; // For Safarivar html = document.documentElement; // Chrome, Firefox, IE and Opera body.scrollLeft = (html.clientWidth - body.scrollWidth) / 2html.scrollLeft = (html.clientWidth - body.scrollWidth) / 2body { background-color: 0178fa; padding: 0; text-align: center; display: flex; justify-content: center; align-items: center; overflow: auto;}#page { width: 100%; height: 100%; margin: 0 auto; padding: 0; display: block;}#wrap-landing { position: relative; margin: 0 auto; padding: 0; content: url(https://i.imgur.com/gb6EyHk.png); width: 1920px; height: 1080px;}<div id="page"> <div id="wrap-landing"></div></div>
2 回答
犯罪嫌疑人X
TA贡献2080条经验 获得超4个赞
您可以使用标准的 javascript：window.scroll(x, y)。
前任：
window.addEventListener('load', function() {
setTimeout(function() {
window.scroll(x, y);
},1)
})
x-coord是要在左上角显示的沿文档水平轴的像素。
y-coord是要在左上角显示的沿文档垂直轴的像素。
window.addEventListener('load', function() {
setTimeout(function() {
window.scroll(screen.width/2, 0);
},1)
})
body{
background-color:0178fa;
padding:0;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
overflow:auto;
}
#page {
width:100%;
height:100%;
margin:0 auto;
padding:0;
display:block;
}
#wrap-landing{
position:relative;
margin:0 auto;
padding:0;
content:url(https://i.imgur.com/gb6EyHk.png);
width:1920px;
height:1080px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="page">
<div id="wrap-landing">
</div>
</div>
</body>
</html>
海绵宝宝撒
TA贡献1809条经验 获得超8个赞
数学是：
centerX = (el.scrollWidth - el.clientWidth) / 2
可滚动#page元素的示例：
const el = (sel, par) => (par || document).querySelector(sel);
const elPage = el("#page");
const centerX = (elPage.scrollWidth - elPage.clientWidth) / 2;
const centerY = (elPage.scrollHeight - elPage.clientHeight) / 2;
elPage.scrollTo(centerX, centerY);
#page {
display: flex;
overflow: scroll;
height: 200px;
}
#image {
flex: 0 0 auto;
margin: auto;
content: url(https://i.imgur.com/gb6EyHk.png);
width: 1920px;
height: 1080px;
}
/*
PS: flex and margin:auto is used to center
#image in case is smaller than the parent.
*/
<div id="page">
<div id="image"></div>
</div>
添加回答
举报
0/150
提交
取消