水平滚动变成垂直滚动

【问题标题】：Horizontal scrolling into vertical scrolling水平滚动变成垂直滚动
【发布时间】：2014-12-29 23:01:15
【问题描述】：

我发现这段代码可以将垂直滚动变为水平滚动。我怎样才能达到相反的效果？先感谢您。

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/

【问题讨论】：

标签： jquery html css scroll horizontal-scrolling

【解决方案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>

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

【讨论】：

我不确定它是否工作正常。对于初学者来说，缺少一个 div（我已经添加了它）但它仍然无法正常工作.. :/ 我正在处理它:)
代码已更新。看看这个。让我知道你的想法