javascript - 图像顶部出现奇怪的线条错误？

Question

最近几天我一直在做一个网站。我刚刚上传了它，但不知道为什么在滚动事件的图像峰值处出现了小线条？

知道如何解决这个问题吗？

网址是http://oliverkle.in

本质上，我使用 JQuery 改变了图像的速度。 我将展示图像及其 HTML 的基础:

<div class="mountains1"></div>

CSS:

.mountains1 {
  background: url(../img/mountains1.png) repeat;
  background-size: cover;
  width: 100%;
  height: 800px;
  position: absolute;
  z-index: 13;
}

和 JavaScript:

var parallax = function(){
  var $scrollY = $(window).scrollTop();
  var $scrollX = $(window).scrollLeft();
  $('.mountains1'  ).css('top', '1640' -($scrollY * 1) + 'px');
}

$(document).ready(function(){parallax();});
$(window).scroll(function(){parallax();});

附言。我正在使用 safari，当错误发生时，它不会发生在 chrome 中。

当我出于某种原因使用 ceil() 或 round() 方法时它会中断吗？

这是我针对 Leo 所做的更改

var parallax = function(){
var $scrollY = $(window).scrollTop();
var $scrollX = $(window).scrollLeft();
var $scrollYint = Math.round($scrollY);
$('.cloudback'  ).css('top', '-375' -($scrollYint * 0.4) + 'px');

$('.mountains1'  ).css('top', '1640' -($scrollYint * 1) + 'px');
$('.mountains2'  ).css('top', '1200'-($scrollYint * 0.75) + 'px');
$('.mountains3'  ).css('top', '720'-($scrollYint * 0.3) + 'px');

$('.navbar2'  ).css('top', '1700' -($scrollYint * 0.7) + 'px');

$('.forest1'  ).css('top', '3100' -($scrollYint * 0.8) + 'px');
$('.forest2'  ).css('top', '2600'-($scrollYint * 0.6) + 'px');
$('.forest3'  ).css('top', '2100'-($scrollYint * 0.4) + 'px');

$('.navbar3'  ).css('top', '3600' -($scrollYint * 0.8) + 'px');

//$('.grass1'  ).css('top', '5250' -($scrollY * 0.8) + 'px');
//$('.grass2'  ).css('top', '4500'-($scrollY * 0.6) + 'px');
//$('.grass3'  ).css('top', '3750'-($scrollY * 0.4) + 'px');

//$('.navbar4'  ).css('top', '5500' -($scrollY * 0.8) + 'px');

Answer 1

我查看了您的代码，发现您正在使用 javascript 计算绝对定位图像的最高值。当最高值计算出带小数位的值时，该线出现在图像上方。例如top: 1642.4px; 而不是 top:1643px。

因此，您需要更新视差函数以四舍五入图像的 top 值，以避免得到带有小数位的结果。