自动居中水平滚动条
我发现了一些相关案例，但没有答案适合我。我的页面有一个很大的水平图像，但我需要从中间开始滚动（只是水平），始终以任何分辨率滚动。
var body = document.body; // For Safari
var html = document.documentElement; // Chrome, Firefox, IE and Opera
body.scrollLeft = (html.clientWidth - body.scrollWidth) / 2
html.scrollLeft = (html.clientWidth - body.scrollWidth) / 2
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;
}
<div id="page">
<div id="wrap-landing"></div>
</div>
四季花海浏览 129回答 2
2回答
-
犯罪嫌疑人X
您可以使用标准的 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> -
海绵宝宝撒
数学是：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>
随时随地看视频慕课网APP
相关分类
JavaScript