我有一个流畅的页面,它是一张纯色图像,可以根据视口高度设置缩放比例(即使用jquery库将页面的宽度转换为页面的高度,verticalscroll.js)
css设置图像为
.graphic{
z-index: 250;
top:0px;
width: calc(102vh * 16.77);
height: 102vh;
margin-left:-20px;
background: url(../images/bigguy.svg) no-repeat;
background-size: 1739vh;
background-position: 0px;
}
由于图像是时间轴,我试图制作一个按x百分比滚动的按钮,并且图像上的事件占滚动百分比的百分比(例如,始终可见1950,滚动了页面的8%)
这是Im用于(例如)移动到click函数内部的.08%滚动的数学运算-但其滚动不足
var scrolling = theHeight * 1.08;
$('html,body').animate({scrollTop: scrolling}, 800);
而不是滚动到.08,它只能滚动到.07
js小提琴-https://jsfiddle.net/schweigert85/boe3kma4/4/(仅在chrome中有效,因为背景尺寸为svg)