[英]parallax scrolling issue - div element jerking when scrolling in webkit browsers
我已經創建了一個視差滾動,它似乎在firefox中正常工作,但是在Chrome瀏覽器中滾動時,正文文本略有跳躍。 點擊這里滾動到關於部分 。 我不確定這是一個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
一些建議:
1.)使用position: fixed
以避免任何抖動,因為您將從文檔流中取出元素。 然后,您可以使用z-index定位它。
2.)盡可能多地緩存以減少處理時間。
3.)Math.round可能沒有必要,但嘗試將此CSS添加到您的移動區域: -webkit-transform: translate3d(0,0,0);
這將強制Chrome中的硬件加速,這可能會減輕一些抖動。 (當我使用Inspector添加它時,我的屏幕看起來更平滑,但它沒有擺脫滾輪的跳躍。)注意:不要在整個文檔(例如身體標簽)上執行此操作,因為它可能導致當前布局出現問題。 (例如,您的導航欄沒有粘在窗口的頂部。)
4.)如果您有任何動畫作為視差邏輯的一部分運行(將邊距補間到位或沿着這些線的某些東西),將其移除 - 這可能會導致您看到的跳躍。
希望這可以幫助。 祝你好運。
我在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'。 他們中的大多數(批量)轉到圓數值。
您將不得不更改滾動的工作方式(即更改間距的計算方式),但這可以通過將position:fixed
CSS元素添加到滾動的頁面元素來position:fixed
。 問題來自JavaScript處理然后呈現所需的時間。
例如,在您的頁面上,您將設置包含文本的每個<div>
標簽具有固定位置,然后使用JavaScript / JQuery函數更新top:
CSS元素。 這應該使頁面順利滾動。
您是否嘗試在scroll函數中添加preventdefault?
$(window).scroll(function(e) {
e.preventDefault();
// rest of your code
}
在前一個問題中,我創建了一個相當不錯的視差滾動實現。 Jquery Parallax滾動效果 - 多向您可能會發現它很有用。
這是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());
}
可能與你的細節無關,但我有一個跳躍的視差滾動問題,我能夠解決它為頁面的固定部分添加以下CSS:
@supports (background-attachment: fixed)
{
.fixed-background
{
background-attachment: fixed;
}
}
不確定所有細節,但在備用固定和滾動背景中找到
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.