如何更改div的滚动速度

Question

我需要更改两个 divs 的滚动速度（共 5 个 div）。 我找到了如何为整个文档更改它：http://jsfiddle.net/36dp03ur/

但我需要的是这样的：

    <div id="1"> //scrolls normally
     ...
    </div>

    <div id="2"> //scrolls slower 
     ...
    </div> 

    <div id="3"> //scrolls normally
     ...
    </div> 

and so on

Answer 1

检查此代码：

$.fn.moveIt = function(){
  var $window = $(window);
  var instances = [];

  $(this).each(function(){
    instances.push(new moveItItem($(this)));
  });

  window.onscroll = function(){
    var scrollTop = $window.scrollTop();
    instances.forEach(function(inst){
      inst.update(scrollTop);
    });
  }
}

var moveItItem = function(el){
  this.el = $(el);
  this.speed = parseInt(this.el.attr('data-scroll-speed'));
};

moveItItem.prototype.update = function(scrollTop){
  var pos = scrollTop / this.speed;
  this.el.css('transform', 'translateY(' + -pos + 'px)');
};

$(function(){
  $('[data-scroll-speed]').moveIt();
});

.content {
  height: 3000px;
}

.wrapper {
  position: fixed;
}

.wrapper .box {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 160%;
  color: #fff;
  position: absolute;
  background: #ff8330;
}

.wrapper .box:nth-of-type(2) {
  left: 100px;
  background: #E01B5D;
}

.wrapper .box:nth-of-type(3) {
  left: 200px;
  background: #30FFFF;
}

.wrapper .box:nth-of-type(4) {
  left: 300px;
  background: #B3FF30;
}

.wrapper .box:nth-of-type(5) {
  left: 400px;
  background: #308AFF;
}

.wrapper .box:nth-of-type(6) {
  left: 500px;
  background: #1BE059;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="wrapper">
    <div class="box" data-scroll-speed="2">S</div>
    <div class="box" data-scroll-speed="3">C</div>
    <div class="box" data-scroll-speed="6">R</div>
    <div class="box" data-scroll-speed="5">O</div>
    <div class="box" data-scroll-speed="9">L</div>
    <div class="box" data-scroll-speed="4">L</div>
  </div>
</div>