Question

我对这个设计有点问题。该页面应该以一个聚焦在视口中间的图像开始，然后在折叠下方向下滚动以查看更多内容。我有它使用下面的代码，但有一个问题。滚动条将视口图像偏离中心。有谁知道如何解决这一问题？请记住，我仍然想要滚动条。

我不知道这是否可行。但是，只有当滚动条处于活动状态时，我才能使用jquery从网站中减去滚动条宽度吗？我不知道如何使用jquery。我觉得如果我从100vw中减去滚动条宽度，那么当没有滚动条时，该网站将在移动设备上查看。

＆＃13;

html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

body {
min-height: 100%;
overflow-x:hidden;
}

#abovefoldcontainer {
background-color: red;
width: 100vw;
height: 100vh;
}

#abovefoldimage {
background-color: #6FF;
position: relative;
left: 150px;
top:  150px;
width: calc(100vw - 300px);
height:  calc(100vh - 300px);   
}

#belowfold {
}

＆＃13;

<html>
<body>
<div id="abovefoldcontainer">
    <div id="abovefoldimage">Content goes here</div>
</div>

<div id="belowfold">
    Content goes here too<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>

＆＃13;

滚动条正在抛弃我的网站

0 个答案: