Question

我在标题上有一个scrollLeft函数，因此它是垂直固定的，但是水平滚动。 chrome for chrome中存在一个错误，其中标题的水平滚动速度是页面其余部分的两倍。

如果我在chrome for 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。

Answer 1

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

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

并将固定元素设置为left:auto !important;

解决了问题!!!

scrollLeft在jsfiddle外面的bug chrome

1 个答案: