用jQuery和CSS编写的一个非常反向的滚动效果，这意味着用户可以以不同的滚动方向（从上到下和从下到上）滚动多列内容。

请参阅实际操作：

参见：

• jQuery中的现代拆分旋转木马滑块-Splitt.js
• jQuery中的交互式分屏动画
• 带视差效果的全屏拆分卡片滑块-内容滑块

如何使用它:

1.在页面中插入两列或多列内容。

<div class="container-1">
  <div class="image">
    <img src="1-1.jpg">  
  </div> 
  <!-- More Content -->
</div>
 
<div class="container-1">
  <div class="image">
    <img src="2-1.jpg">  
  </div> 
  <!-- More Content -->
</div>
 
<div class="container-1">
  <div class="image">
    <img src="3-1.jpg">  
  </div> 
  <!-- More Content -->
</div>

.container-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: calc(100% / 3);
  box-sizing: border-box;
  height: 3000px;
} 
 
.container-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: calc(100% / 3);
  box-sizing: border-box;
  position: fixed;
  left: calc(100% / 3);
  bottom: 0;
  height: 3000px;
  padding-bottom: 15vh;
}
.container-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: calc(100% / 3);
  box-sizing: border-box;
  height: 3000px;
} 

2.在文档中加载必要的jQuery JavaScript库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

3.启用第二列上的反向滚动的主脚本。

$(window).on('scroll',function(){
  $(".container-2").css('bottom',$(window).scrollTop()*-1);
});

预览截图

jQuery中 冷却反向滚动（拆分滚动）效果