我的网页上有 2 个 div，一个是使用 Turnjs 创建的翻页书，另一个是包含按钮的 div。当我加载页面时，div 位于页面的中心:/image/RlhbW.jpg 。刷新页面后，即使刷新页面，div 也会向上移动并保持在那里。这是刷新后页面的样子:/image/aPN40.jpg .
这是 html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<link rel="stylesheet" href="css/test.css" />
</head>
<body>
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div style="background-image:url(brochure/Brochure_Main.jpeg)"></div>
<div style="background-image:url(brochure/Brochure_Mobile_Ordering.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Automobile.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Beauty_Wellness.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Food_Beverage.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Hair_Salon.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Minimart.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Mobile_Phone_Shop.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Retail.jpg)"></div>
<div style="background-image:url(brochure/Brochure_POS_Wholesale.jpg)"></div>
</div>
</div>
</div>
<div class="buttons">
<button type="button" onclick="thePreviousPage()" class="button">Previous</button>
<button type="button" onclick="theHomePage()" class="button">Home</button>
<button type="button" onclick="theNextPage()" class="button">Next</button>
</div>
<script type="text/javascript">
theWindowHeight = $(window).height();
theWindowWidth = $(window).width();
// Create the flipbook
$('.flipbook').turn({
// Width
width: theWindowWidth*0.9,
// Height
height:theWindowHeight*0.7,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
console.log($('.flipbook').turn('size'));
function thePreviousPage()
{
$('.flipbook').turn('previous');
}
function theHomePage()
{
$('.flipbook').turn('page',1);
}
function theNextPage()
{
$('.flipbook').turn('next');
}
</script>
</body>
</html>
这是CSS:
body{
overflow:hidden;
background-color:#fcfcfc;
margin:0;
padding:0;
}
.flipbook-viewport{
overflow:hidden;
width:100%;
height:100% !important;
overflow-anchor: none;
}
.flipbook-viewport .container{
position: absolute;
margin: auto;
top: 45%;
left: 37%;
height: 100%;
width: 100%;
}
.flipbook-viewport .flipbook{
top: -30%;
left: -32%;
}
.flipbook
{
transform: translate(-50%, -50%);
}
.flipbook-viewport .page{
background-color:white;
background-repeat:no-repeat;
background-size:100% 100%;
}
.flipbook .page{
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
box-shadow:0 0 20px rgba(0,0,0,0.2);
}
.flipbook-viewport .page img{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin:0;
}
.flipbook-viewport .shadow{
-webkit-transition: -webkit-box-shadow 0.5s;
-moz-transition: -moz-box-shadow 0.5s;
-o-transition: -webkit-box-shadow 0.5s;
-ms-transition: -ms-box-shadow 0.5s;
-webkit-box-shadow:0 0 20px #ccc;
-moz-box-shadow:0 0 20px #ccc;
-o-box-shadow:0 0 20px #ccc;
-ms-box-shadow:0 0 20px #ccc;
box-shadow:0 0 20px #ccc;
}
.button{
position: absolute;
align-items: center;
left: 50%;
bottom: 10%;
}
如何保证页面刷新后内容不会上移？
最佳答案
你只需要做一些css更新，这里是更新的几个css类，
.flipbook-viewport {
overflow: hidden;
width: 100%;
height: 100% !important;
overflow-anchor: none;
top: 100px;
position: relative;
}
.flipbook-viewport .container {
position: relative;
margin: auto;
top: 45%;
left: 37%;
height: 100%;
width: 100%;
}
.flipbook-viewport .flipbook {
left: auto;
top: auto;
}
关于javascript - 刷新页面后div始终会上移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68494289/