edgescroll.js

!(function ($, window, pluginName, undefined){
  $.fn[pluginName] = function(action, buffer) {
    if (buffer == null) buffer = 40;
    return this.map(function() {
      console.log(pluginName, action, buffer, this);
      var $this = $(this);
      if (action === 'start') {
        var top = $('<div class="edgescroll-trigger edgescroll-top">')[0],
          bottom = $('<div class="edgescroll-trigger edgescroll-bottom">')[0];
        var $triggers = $([top, bottom]).css({
          backgroundColor: 'rgba(0, 0, 255, 0.5)',
          width: $this.width(),
          height: buffer
        })
        var holder = this==window?document.body:this;
        $(holder).append($triggers);
        if (this == window) {
          $triggers.css({
            position: 'fixed',
            left: 0
          })
          $(top).css('top', '0px')
          // $(bottom).css('top', $(window).height()-buffer);
          $(bottom).css('bottom', '0px')  ;
        } else {
          $triggers.css({
            position: 'absolute',
            left: $this.offset().left
          })
          $(top).css('top', '0px')
          $(bottom).css('bottom', '0px')
          // var offsetTop = $this.position().top;
          // $(top).css('top', offsetTop)
          // $(bottom).css('top', offsetTop+$this.height()-buffer)
        }

        var data = {
          $triggers: $triggers,
          timer: -1
        };

        $triggers.hover(function(e) {
          var that = this;
          data.timer = setInterval(function() {
            if (that == top) {
              $this.scrollTop($this.scrollTop()-4)
            } else {
              $this.scrollTop($this.scrollTop()+4)
            }
          }, 20)
        }, function(e) {
          clearInterval(data.timer);
          data.timer = -1;
        })

        $(this).data('edgescroll', data)
        
      } else if (action === 'end') {
        $(this).data('edgescroll').$triggers.remove()
        clearInterval($(this).data('edgescroll').timer);
        $(this).removeData('edgescroll');
      }
      return this;
    });
  };
})(jQuery, window, 'edgescroll');