【发布时间】：2012-11-06 14:15:51
【问题描述】：
我创建了一个视差滚动，它在 Firefox 中似乎运行良好，但在 chrome 浏览器中滚动时正文文本略有跳跃。 click here scroll to the about section。我不确定这是 css 还是 JS 问题.. 下面是我已合并到视差函数中的 sn-p
有谁知道我如何解决这个问题？
$(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) 仅调用一次
$(window).scrollTop()并缓存该值，2) 在事件侦听器之外查询 DOM 以获取[data-text]元素。 -
@IanKuca 能否详细说明一下，甚至可以在 github 上编辑 JS。我不是最擅长 Javascript 的人
-
@IanKuca 使用该脚本我收到以下错误消息...“未捕获的 ReferenceError：$self 未定义”
-
您需要在我编辑的部分代码之前定义
$self变量。想一想。
标签： javascript jquery css google-chrome webkit