scrollLeft jsfddle之外的bug chrome

我在頁眉上有一個scrollLeft函數，所以它是垂直固定的，但水平滾動。在android中chrome有一個錯誤，其中標題的水平滾動速度是頁面其餘部分的兩倍。scrollLeft jsfddle之外的bug chrome

如果我在android中查看這個例子，它的工作原理應該如此。

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title> - jsFiddle demo</title> 

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'> 
</script> 




<link rel="stylesheet" type="text/css" href="/css/result-light.css"> 

<style type='text/css'> 
#header { 
height: 40px; 
width: 900px; 
background-color: red; 

position: fixed; 
    z-index: 2; } 

#content { 
height: 1000px; 
width: 900px; 
background-color: blue; 
top: 50px; 
position: absolute; 
z-index: 1; } 
</style> 



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$(window).scroll(function(){ 
    $('#header').css('left', 8 - $(this).scrollLeft()); 
}); 
});//]]> 

</script> 


</head> 
<body> 
<div id="header">This is a fixed header that scrolls horizontally</div> 
<div id="content">This is blah blah blah blah</div> 

</body> 


</html>

當我實現一個基本的頁面此頁面上的代碼，會出現錯誤。

simple jsfiddle page

莫名其妙的jsfiddle得到周圍的bug。

來源

2015-01-26 Tom Webb

我發現該錯誤不存在於jsfiddle上，因爲該演示在iframe中。 scrollleft函數在我的網站上的iframe內工作，但不在網站上。例如，如果我在我的網站內的iframe中使用我的網站，則scrollleft可以在iframe中使用，但不能在網站上使用。 – 2015-01-27 20:32:00

更改
$('#header').css('left', 8 - $(this).scrollLeft());

到
$('#header').css('margin-left', 8 - $(this).scrollLeft());

和固定元素設置爲left:auto !important;

已經解決了這個問題！

來源

2015-01-28 21:48:26

scrollLeft jsfddle之外的bug chrome

回答

相關問題