我在body
中有元素标尺和页面。但是当我在zoom
比例和scroll
水平时,标尺不会滚动到left
或right
。
如何在标尺位置与元素页面相同?
$(".ruler").css("zoom", 2);
$("page").css("zoom", 2);
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
background: gray;
padding-top: 1cm;
}
page {
width: 21cm;
height: 29cm;
margin: 0 auto;
background: #fff;
display: block;
padding: 2.54cm;
box-sizing: border-box;
}
.ruler {
position: fixed;
height: 30px;
background: #0077CC;
top: 0;
left: 0;
width: 100%;
}
.rulers {
width: 21cm;
margin: 0 auto;
}
.rulers-line {
width: 0.5mm;
height: 0.5cm;
margin-right: 0.9cm;
background: #000;
;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ruler">
<div class="rulers">
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
<div class="rulers-line"></div>
</div>
</div>
<page></page>