Question

我发现这段代码使垂直滚动成水平。我怎样才能达到相反的目的呢？先感谢您。

HTML：

<div id='first'>
   <div id='second'>
       <!-- content -->
   </div>

CSS：

#first {
   overflow:hidden;
   height:9000px;
}
#second {
width:9000px;
position:fixed;
    }

JS：

window.onscroll=function() {
   var scroll = window.scrollY;
   $('#second').css('left', '-' + scroll + 'px');
}

小提琴： http://jsfiddle.net/zfBhK/

Answer 1

更新了代码。代码现在可以水平滚动到垂直移动

<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<style>

body{
    overflow-x: auto;
}

#first {
  /*first I set position to absolute*/
  position:absolute;
}
#second {
  position:fixed;
}
</style>

</head>
<body>
<div id='first' style="position:absolute">
  <h1>my1stContent*my1stContent*my1stContent*my1stContent*my1stContent*my1stContent*my1stContent*my1stContent*my1stContent*<h1>
    </div>
      <br><br><br>
<div id='second'>
 <h1>my2ndContent*my2ndContent*my2ndContent*my2ndContent*my2ndContent*my2ndContent*my2ndContent*my2ndContent*my2ndContent*</h1>
</div>

<script>

window.onscroll=function() {
  var scroll = window.scrollX;
  //i then modified the css by changing to 'top'
  $('#second').css('margin-top', '-' + scroll + 'px');
}

</script>
</body>
</html>

当滚动条水平移动时，第二个内容现在应该垂直移动。如果有任何问题请告诉我

水平滚动到垂直滚动

1 个答案: