スムーススクロールの実装

setTimeoutまたはrequestAnimationFrameを利用してスムーススクロールを実装したいのですが、いまひとつ理解出来ずにいます。
次のコードでスムーススクロールを実装するにはどの様にしたら良いのでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<title>要素の表示領域に収まらないコンテンツを横スクロール</title>
5<meta charset="utf-8">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<style type="text/css">
8.scroll-outer {
9    display: block;
10    overflow: hidden;
11    width: 300px;
12    height: 40px;
13    margin: 100px auto 0;
14}
15
16.scroll-inner {
17    display: block;
18    overflow-y: hidden;
19    overflow-x: scroll;
20    width: 100%;
21    height: 58px;
22    background-color: #eee;
23    -webkit-overflow-scrolling: touch;
24    -webkit-user-select: none;
25       -moz-user-select: none;
26        -ms-user-select: none;
27}
28
29.scroll-inner::-webkit-scrollbar {
30    display: none;
31}
32
33.scroll-inner ul {
34    display: inline-block;
35    list-style: none;
36    overflow: hidden;
37    position: relative;
38    margin: 0;
39    padding-left: 10px;
40    white-space: nowrap;
41    font-size: 0;
42}
43
44.scroll-inner li {
45    display: inline-block;
46    margin-right: 10px;
47    font-size: 14px;
48    line-height: 40px;
49}
50
51</style>
52<script type="text/javascript">
53( function () {
54  'use strict';
55
56  function wheelScroll( event ) {
57    var doc = event.target,
58        elements = doc.getElementsByClassName( 'scroll-inner' );
59
60    // 要素が無い時は処理を終了
61    if ( typeof elements[0] === 'undefined' ) return;
62
63    // ブラウザが対応しているホイールイベントを変数に設定
64    var mouseWheelEvent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
65
66    for ( var i = 0, l = elements.length, element, width, frame; i < l; ++i ) {
67      element = elements[i];
68      width = element.scrollWidth;
69      frame = ( element.innerWidth || element.clientWidth );
70
71      element.addEventListener( mouseWheelEvent, scroll, false );
72    }
73  }
74
75  function wheelMove( event ) {
76    var element = event.currentTarget,
77        delta = event.deltaY ? event.deltaY : event.wheelDelta ? event.wheelDelta : event.detail,
78        width = element.scrollWidth,
79        frame = ( element.innerWidth || element.clientWidth ),
80        end = width - frame,
81        move;
82
83    if ( delta > 0 && element.scrollLeft < end ) { // 下回転
84      event.preventDefault();
85      move = element.scrollLeft + 30;
86
87    } else if( delta < 0 && element.scrollLeft > 0 ) {  // 上回転
88      event.preventDefault();
89      move = element.scrollLeft - 30;
90
91    } else {
92      return;
93
94    }
95
96    return move;
97
98  }
99
100  function scroll( event ) {
101    var element = event.currentTarget,
102        move = wheelMove(),
103        timer;
104    element.scrollLeft = move;
105    timer = setTimeout( 'scroll()', 15 );
106  }
107
108  document.addEventListener( 'DOMContentLoaded', wheelScroll, false );
109
110}());
111</script>
112</head>
113<body>
114
115<div class="scroll-outer">
116  <div class="scroll-inner">
117    <ul>
118      <li>sample1</li>
119      <li>sample2</li>
120      <li>sample3</li>
121      <li>sample4</li>
122      <li>sample5</li>
123      <li>sample6</li>
124      <li>sample7</li>
125      <li>sample8</li>
126      <li>sample9</li>
127      <li>sample10</li>
128    </ul>
129  </div>
130</div>
131
132</body>
133</html>