我正在为两个 div 使用 background-attachment:scroll
,滚动效果很好,但唯一的问题是滚动时背景图像抖动。我在下面附上我的 CSS:
.slider_area {
width:100%;
height:600px;
background:#9ad5e3 url(../images/slide_1.jpg) center top no-repeat;
background-attachment:scroll;
-webkit-background-attachment:scroll;
background-size:cover;
}
.cont_1_wrapper {
width:100%;
height:auto;
padding:100px 0;
background:url(../images/cont_1_bg_b.jpg) repeat;
background-attachment:scroll;
}
<script>
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('.scroll').css('background-position', 'center ' + ((scrolledY)) + 'px');
});
</script>
JSFIDDLE 链接:https://jsfiddle.net/ansarmon/apxrztat/1/
有人可以帮我解决这个问题吗?
最佳答案
尝试添加
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
到.slider_area
关于javascript - 为什么在使用 css 作为背景附件时滚动时背景图像会抖动 :scroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34305002/