我创建了一个视差滚动条，它似乎在firefox中工作得很好但是在Chrome浏览器中滚动时在正文文本上有轻微的跳跃。 click here scroll to the about section。我不确定这是一个css还是JS问题..下面是我已经整合到我的视差函数中的片段
有谁知道我是如何解决这个问题的？
$(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
答案 0 :(得分：4)
一些建议：
1。）使用position: fixed来避免任何抖动，因为您将从文档流中取出元素。然后，您可以使用z-index定位它。
2。）尽可能多地缓存以减少处理时间。
3.。）Math.round可能没有必要，但尝试将此CSS添加到您的移动区域：-webkit-transform: translate3d(0,0,0);这将强制Chrome中的硬件加速，这可能会减轻一些抖动。 （当我使用Inspector添加它时，我的屏幕看起来更平滑，但它没有摆脱滚轮的跳跃。）注意：不要在整个文档（例如身体标签）上执行此操作，因为它可能导致当前布局出现问题。 （例如，您的导航栏没有粘在窗口的顶部。）
4。）如果您有任何动画作为视差逻辑的一部分运行（将边距补间到位或沿着这些线条移动），请将其删除 - 这可能会导致您看到的跳跃。
希望这会有所帮助。祝你好运。
答案 1 :(得分：2)
我在FireFox和Chrome（Mac）中看到了同样的抖动。看着你的容器，有一点让我眼花缭乱的是正在计算/使用的像素位置。
Chrome: <div id="about-title" style="margin-top: 1562.3999999999999px;">
FireFox: <div id="about-title" style="margin-top: 1562.4px;">
浏览器不允许内容位于1/2像素，更不用说0.3999999像素了。我认为它正在移动它，并试图计算是向上舍入还是向下舍入。它会抖动，因为只要你点击鼠标滚轮就可以计算出来。
因此，我会尝试将Math.round（）添加到您的位置，以便容器永远不会陷入困境。
在这里查看代码：http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html
Firebug的一些元素，你会看到它们的唯一一部分是'0.5'。他们中的大多数（批量）都是圆数值。
答案 2 :(得分：1)
您将不得不更改滚动的工作方式（即更改间距的计算方式），但这可以通过将position:fixed CSS元素添加到滚动的页面元素来修复。问题来自JavaScript处理然后呈现所需的时间。
例如，在您的页面上，您可以将包含文本的每个<div>标记设置为固定位置，然后使用JavaScript / JQuery函数更新top: CSS元素。这应该使页面顺利滚动。
答案 3 :(得分：1)
您是否尝试在scroll函数中添加preventdefault？
$(window).scroll(function(e) {
e.preventDefault();
// rest of your code
}
答案 4 :(得分：0)
在上一个问题中，我创建了一个相当不错的视差滚动实现。 Jquery Parallax Scrolling effect - Multi directional您可能会发现它很有用。
这是JSFiddle http://jsfiddle.net/9R4hZ/40/使用向上/向下箭头或滚轮。
使用填充和边距进行定位可能是您遇到渲染问题的原因。当我的代码使用滚动或键盘输入效果时，你可以循环相关部分并检查$ moving变量，直到你到达屏幕上所需的元素。
function parallaxScroll(scroll) {
// current moving object
var ml = $moving.position().left;
var mt = $moving.position().top;
var mw = $moving.width();
var mh = $moving.height();
// calc velocity
var fromTop = false;
var fromBottom = false;
var fromLeft = false;
var fromRight = false;
var vLeft = 0;
var vTop = 0;
if($moving.hasClass('from-top')) {
vTop = scroll;
fromTop = true;
} else if($moving.hasClass('from-bottom')) {
vTop = -scroll;
fromBottom = true;
} else if($moving.hasClass('from-left')) {
vLeft = scroll;
fromLeft = true;
} else if($moving.hasClass('from-right')) {
vLeft = -scroll;
fromRight = true;
}
// calc new position
var newLeft = ml + vLeft;
var newTop = mt + vTop;
// check bounds
var finished = false;
if(fromTop && (newTop > t || newTop + mh < t)) {
finished = true;
newTop = (scroll > 0 ? t : t - mh);
} else if(fromBottom && (newTop < t || newTop > h)) {
finished = true;
newTop = (scroll > 0 ? t : t + h);
} else if(fromLeft && (newLeft > l || newLeft + mw < l)) {
finished = true;
newLeft = (scroll > 0 ? l : l - mw);
} else if(fromRight && (newLeft < l || newLeft > w)) {
finished = true;
newLeft = (scroll > 0 ? l : l + w);
}
// set new position
$moving.css('left', newLeft);
$moving.css('top', newTop);
// if finished change moving object
if(finished) {
// get the next moving
if(scroll > 0) {
$moving = $moving.next('.parallax');
if($moving.length == 0)
$moving = $view.find('.parallax:last');
} else {
$moving = $moving.prev('.parallax');
if($moving.length == 0)
$moving = $view.find('.parallax:first');
}
}
// for debug
$('#direction').text(scroll + " " + l + "/" + t + " " + ml + "/" + mt + " " + finished + " " + $moving.text());
}
答案 5 :(得分：0)
可能与您的详细信息无关，但是我遇到了视差滚动问题，我能够通过为页面的固定部分添加以下CSS来解决此问题：
<script type="text/javascript">
$(document).on('change', '.selectCourse', function(){
var course_id = $(this).attr('data-id');
var val = $(this).find(":selected").val();
var syllabus_id = 1;
$.ajax({
type: "POST",
url: "get.php",
data: {parent_id:val,syllabus_id:syllabus_id},
success: function(data)
{
$("#parent_id_" + course_id).html(data);
}
});
});
</script>
不确定所有细节，但可以在Alternate Fixed & Scroll Backgrounds
找到