https://educationlinkhouse.com/scrolling/jquery.newstape.js

1if (typeof Object.create !== "function") {
2    Object.create = function(obj) {
3        function F() {
4        }
5        F.prototype = obj;
6        return new F();
7    };
8}
9
10(function($, window, document) {
11    var Newstape = {
12        $elem: null,
13        $content: null,
14        options: {},
15        height: 0,
16        contentHeight: 0,
17        dragstartPos: 0,
18        dragDeltaY: 0,
19        dragDeltaYReduce: 0,
20        timer: null,
21        pos: 0,
22        init: function(options, el) {
23            var base = this;
24
25            base.$elem = $(el);
26            base.$content = $('.newstape-content', base.$elem);
27
28            base.options = $.extend({}, $.fn.newstape.options, base.$elem.data(), options);
29
30            var heightRefresh = function() {
31                base.height = base.$elem.outerHeight();
32                base.contentHeight = base.$content.outerHeight();
33            };
34 
35            if (base.options.heightSpy) {
36                setInterval(heightRefresh, 1000);
37            }
38
39            heightRefresh();
40
41            var play = function() {
42                base.timer = setInterval(function() {
43                    base.move();
44                }, base.options.period);
45            };
46
47            base.$elem.bind('mouseover.newstape', function() {
48                clearInterval(base.timer);
49            });
50
51            base.$elem.bind('mouseout.newstape', function() {
52                play();
53            });
54
55            if (base.options.mousewheel) {
56                base.$elem.bind('mousewheel.newstape', function(e) {
57                    e.preventDefault();
58                    base.pos = (e.deltaY > 0) ? base.pos + base.options.mousewheelRate : base.pos - base.options.mousewheelRate;
59                    base.move();
60                });
61            }
62
63            $('a', base.$elem).focus(function(e) {
64                base.$elem.scrollTop(0);
65                base.pos = base.height - $(this).position().top - $(this).outerHeight();
66                base.move();
67            });
68
69            if (base.options.dragable) {
70                base.$elem.bind('dragstart.newstape', function(e, dd) {
71                    base.dragDeltaY = 0;
72                    base.dragDeltaYReduce = 0;
73                    base.dragstartPos = base.pos;
74                    base.$elem.addClass('newstape-drag');
75                }).bind('drag.newstape', function(e, dd) {
76                    base.dragDeltaY = dd.deltaY;
77                    base.pos = base.dragstartPos + (dd.deltaY - base.dragDeltaYReduce);
78                    base.move();
79                }).bind('dragend.newstape', function(e, dd) {
80                    base.$elem.removeClass('newstape-drag');
81                });
82            }
83
84            play();
85        },
86        move: function() {
87            var base = this;
88
89            var dragUpdate = function() {
90                base.dragstartPos = base.pos;
91                base.dragDeltaYReduce = base.dragDeltaY;
92                base.dragDeltaY = 0;
93            };
94
95            if (base.pos <= base.contentHeight * -1) {
96                base.pos = base.height;
97                dragUpdate();
98            }
99
100            if (base.pos >= base.height + base.options.offset) {
101                base.pos = base.contentHeight * -1;
102                dragUpdate();
103            }
104
105            if (!base.$elem.hasClass('newstape-drag')) {
106                base.pos = base.pos - base.options.offset;
107            }
108
109            base.$content.css('top', parseInt(base.pos) + 'px');
110        }
111    };
112
113    $.fn.newstape = function(options) {
114        return this.each(function() {
115            if ($(this).data("newstape-init") === true) {
116                return false;
117            }
118
119            $(this).data("newstape-init", true);
120            var newstape = Object.create(Newstape);
121            newstape.init(options, this);
122            $.data(this, "newstape", newstape);
123        });
124    };
125
126    $.fn.newstape.options = {
127        period: 30,
128        offset: 1,
129        mousewheel: true,
130        dragable: true,
131        mousewheelRate: 30,
132        heightSpy: true
133    };
134
135}(jQuery, window, document));