视差滚动问题 - 在webkit浏览器中滚动时div元素抖动 [英] parallax scrolling issue - div element jerking when scrolling in webkit browsers
问题描述
我已经创建了一个视差滚动条，它似乎在firefox中工作得很好但是在Chrome浏览器中滚动时正文文本略有跳跃。 点击此处滚动到about部分。我不确定这是不是css或JS问题..下面是我已经整合到我的视差函数中的片段
I have created a parallax scroll, which seem to be working fine in firefox however in the chrome browser there's a slight jump on the body text when scrolling. click here scroll to the about section. I am not sure if t this is a css or JS issue.. below is a snippet i have incorporated into my parallax function
有谁知道我如何解决这个问题？
Does anyone know how i an fix this issue?
$(document).ready(function(){
// Cache the Window object
$window = $(window);
// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
$('[data-type="background"]').each(function(){
// Store some variables based on where we are
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
// When the window is scrolled...
$(window).scroll(function() {
// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
( (topOffset + $self.height()) > $window.scrollTop() ) ) {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $self.data('speed'));
// If this element has a Y offset then add it on
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$self.css({ backgroundPosition: coords });
$('[data-type="scroll-text"]', $self).each(function() {
var $text= $(this);
var pos = ($window.scrollTop()/10) * $text.data('speed');
var curP = $text.css('margin-top');
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome) {
$text.animate({
paddingTop: pos,
}, 200, 'linear', function() {
// Animation complete.
});
} else {
$text.css('padding-top', pos);
}
});
}; // in view
}); // window scroll
}); // each data-type
}); // document ready
推荐答案
一些建议：
1。）使用 position：fixed 以避免任何抖动，因为您将从文档流中取出元素。然后你可以使用z-index定位它。
1.) Use position: fixed to avoid any jitter, as you'll be taking the element out of the document flow. You can then position it using z-index.
2。）尽可能多地缓存以减少处理时间。
2.) Cache as much as you can to ease processing time.
3.。）Math.round可能没有必要，但尝试将此CSS添加到您的移动区域： -webkit-transform：translate3d（0,0,0）; 这将强制Chrome中的硬件加速，这可能会减轻一些抖动。 （当我使用Inspector添加它时，我的屏幕看起来更平滑，但它没有摆脱滚轮的跳跃。）注意：不要在整个文档（例如身体标签）上执行此操作，因为它可能导致当前布局出现问题。 （例如，您的导航栏没有粘在窗口的顶部。）
3.) Math.round may not be necessary, but try adding this CSS to your moving areas: -webkit-transform: translate3d(0,0,0); This will force hardware acceleration in Chrome, which may ease some of the jittering. (It looked smoother on my screen when I added this with Inspector, but it didn't get rid of the jumpiness with the scroll wheel.) Note: Don't do this on your entire document (e.g. body tag), as it might cause some issues with your current layout. (Your navigation bar didn't stick to the top of the window, for instance.)
4.如果您有任何动画作为视差逻辑的一部分运行（将边距补间到位或沿着这些线的东西），删除它 - 这可能会导致你看到的跳跃。
4.) If you have any animations running as part of your parallax logic (tweening the margin into place or something along those lines), remove it - that would probably cause the jump you see.
希望这会有所帮助。祝你好运。
Hope this helps. Best of luck.
这篇关于视差滚动问题 - 在webkit浏览器中滚动时div元素抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
