Scroll 滚动反弹

                                        <div class="demo-wrapper"  axScroll>
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
    
                                        <div class="ax-break"></div>
    
                                        <div class="demo-wrapper" id="scroll01">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
            

                                            new axScroll('#scroll01');
            

                                            .demo-wrapper {
                                                border: 1px solid #ebebeb;
                                            }
            
                                            .demo-wrapper[axis='y'] {
                                                height: 300px;
                                            }
            
                                            .demo-wrapper li {
            
                                                justify-content: center;
                                                align-items: center;
                                                box-sizing: border-box;
                                                text-align: center;
                                            }
            
                                            .demo-wrapper li:nth-child(even) {
                                                background-color: antiquewhite;
                                            }
            
                                            .demo-wrapper li:nth-child(odd) {
                                                background-color: lightpink;
                                            }
            
                                            .demo-wrapper[axis='x'] li {
                                                display: inline-flex;
                                                flex: auto;
                                                height: 200px;
                                                width: 200px;
                                                line-height: 200px;
                                            }
            
                                            .demo-wrapper[axis='y'] li {
                                                display: flex;
                                                height: 50px;
                                                line-height: 50px;
                                            }
            
                                            .demo-wrapper[axis='y'] li>.ax-scroll {
                                                flex: auto;
                                            }
            
                                            .demo-wrapper .demo-start,
                                            .demo-wrapper .demo-end {
                                                background-color: rgba(255, 255, 255, .5);
                                                width: 100%;
                                                text-align: center;
                                                transition: all 200ms ease;
                                                position: absolute;
                                                left: 0;
                                            }
            
                                            .demo-wrapper .demo-start {
                                                top: -2.8rem;
                                            }
            
                                            .demo-wrapper .demo-end {
                                                bottom: -2.8rem;
                                            }
            
                                            .demo-wrapper .demo-start[show] {
                                                top: 0;
                                            }
            
                                            .demo-wrapper .demo-end[show] {
                                                bottom: 0;
                                            }
            
                                            .demo-wrapper[display='grid'][axis='x'] ul {
                                                display: inline-flex;
                                                width: 2000px;
                                                height: 400px;
                                                flex-wrap: wrap;
                                                flex-direction: column;
                                            }
            
                                            .demo-wrapper[display='grid'][axis='y'] li {
                                                width: 25%;
                                                height: 10rem;
                                            }
            

                                        <div class="demo-wrapper" id="scroll02">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll02',{
                                                axis:'x'
                                            });
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="scroll01">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
    
                                        <div class="ax-break"></div>
    
                                        <div class="demo-wrapper" id="scroll02">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll14');
                                            new axScroll('#scroll15',{
                                                axis:'x'
                                            });
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="scroll22">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
    
                                        <div class="ax-break"></div>
                                        <button class="ax-btn" id="replace01">替换为11条内容</button>
                                        <button class="ax-btn" id="replace02">替换为3条内容</button>
                                        

                                            let replaceIns = new axScroll('#scroll22',{
                                                barShow: true,
                                            }),
                                                replaceBtn01 = document.querySelector('#replace01'),
                                                replaceBtn02 = document.querySelector('#replace02');
                                            replaceBtn01.onclick = () => {
                                                replaceIns.wrapperDom.innerHTML = `
                                                
新元素1
新元素2
新元素3
新元素4
新元素5
新元素6
新元素7
新元素8
新元素9
新元素10
新元素11
                                                `;
                                            }
                                            replaceBtn02.onclick = () => {
                                                replaceIns.wrapperDom.innerHTML = `
                                                
新元素1
新元素2
                                                `;
                                            }
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="scroll01">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
    
                                        <div class="ax-break"></div>
    
                                        <div class="demo-wrapper" id="scroll02">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll12', {
                                                axis: 'x'
                                            });
                                            new axScroll('#scroll13');
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="scroll18">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        
                                        

                                            new axScroll('#scroll18',{
                                                unbound:{selector:'.no',}
                                            });
                                        

                                            <同上>
                                        

                                            <div class="demo-wrapper" id="scroll03">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll03', {
                                                transInit: -290,
                                            });
                                            new axScroll('#scroll21', {
                                                transInit: '#init03',
                                            });
                                        

                                           <同上>
                                        

                                            <div class="demo-wrapper" id="scroll11">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll11',{
                                                paddingStart:100,
                                                paddingEnd:100,
                                            });
                                        

                                           <同上>
                                        

                                            <div class="demo-wrapper" id="scroll11">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scrollP');
                                            new axScroll('#scrollC', {
                                                axis: 'x',
                                            });
                                            new axScroll('#scrollC2');
                                        

                                           <同上>
                                        

                                            <div class="demo-wrapper" id="scroll04">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll04',{
                                                onCompleted:()=>{
                                                    console.log('空白宽度达到50px了')
                                                }
                                            });
                                        

                                           <同上>
                                        

                                            <div class="demo-wrapper" id="scroll05">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll05',{
                                                onExceed:(percent)=>{
                                                    console.log('超出比例：',percent);
                                                }
                                            });
                                        

                                           <同上>
                                        

                                            <div class="demo-wrapper" id="scroll06">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll06',{
                                                onToStart: () => {
                                                    console.log('到头了！');
                                                },
                                                onToEnd: () => {
                                                    console.log('到尾了！');
                                                }
                                            });
                                        

                                           <同上>
                                        

                                            <div class="demo-wrapper" id="scroll16">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll16',{
                                                onTranslated: (value) => {
                                                    console.log('发生了偏移：',value);
                                                }
                                            });
                                        

                                           <同上>
                                        

                                            <div class="demo-wrapper" id="scroll07">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll07',{
                                                onStart: (arg) => {
                                                    console.log('按下，上次translate值：',arg);
                                                },
                                                onMove: (arg) => {
                                                    console.log('移动，当前translate值：',arg);
                                                },
                                                onEnd: (arg) => {
                                                    console.log('松开，当前translate值：',arg);
                                                }
                                            });
                                        

                                           <同上>
                                        

                                            <h5>free模式，自动计算滑行距离</h5>
                                            <div class="demo-wrapper" id="scroll08">
                                                <ul>
                                                    <li>子元素1</li>
                                                    <li>子元素2</li>
                                                    <li>子元素3</li>
                                                    <li>子元素4</li>
                                                    <li>子元素5</li>
                                                    <li>子元素6</li>
                                                    <li>子元素7</li>
                                                    <li>子元素8</li>
                                                    <li>子元素9</li>
                                                    <li>子元素10</li>
                                                    <li>子元素11</li>
                                                    <li>子元素12</li>
                                                    <li>子元素13</li>
                                                    <li>子元素14</li>
                                                    <li>子元素15</li>
                                                    <li>子元素16</li>
                                                    <li>子元素17</li>
                                                    <li>子元素18</li>
                                                    <li>子元素19</li>
                                                    <li>子元素20</li>
                                                </ul>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <h5>neighbor模式，（鼠标或手指抬起时）漂移到下个兄弟节点</h5>
                                            <div class="demo-wrapper" id="scroll08-n">
                                                <ul>
                                                    <li>子元素1</li>
                                                    <li>子元素2</li>
                                                    <li>子元素3</li>
                                                    <li>子元素4</li>
                                                    <li>子元素5</li>
                                                    <li>子元素6</li>
                                                    <li>子元素7</li>
                                                    <li>子元素8</li>
                                                    <li>子元素9</li>
                                                    <li>子元素10</li>
                                                    <li>子元素11</li>
                                                    <li>子元素12</li>
                                                    <li>子元素13</li>
                                                    <li>子元素14</li>
                                                    <li>子元素15</li>
                                                    <li>子元素16</li>
                                                    <li>子元素17</li>
                                                    <li>子元素18</li>
                                                    <li>子元素19</li>
                                                    <li>子元素20</li>
                                                </ul>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <h5>snap模式，漂移到下一个可吸附元素</h5>
                                            <div class="demo-wrapper" id="scroll08-a">
                                                <ul>
                                                    <li>子元素1</li>
                                                    <li class="unsnaped">子元素2（不可吸附）</li>
                                                    <li>子元素3</li>
                                                    <li class="unsnaped">子元素4（不可吸附）</li>
                                                    <li>子元素5</li>
                                                    <li>子元素6</li>
                                                    <li class="unsnaped">子元素7（不可吸附）</li>
                                                    <li>子元素8</li>
                                                    <li>子元素9</li>
                                                    <li>子元素10</li>
                                                    <li class="unsnaped">子元素11（不可吸附）</li>
                                                    <li>子元素12</li>
                                                    <li>子元素13</li>
                                                    <li>子元素14</li>
                                                    <li class="unsnaped">子元素5（不可吸附）</li>
                                                    <li>子元素16</li>
                                                    <li>子元素17</li>
                                                    <li>子元素18</li>
                                                    <li>子元素19</li>
                                                    <li>子元素20</li>
                                                </ul>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <h5>比例模式，漂移外容器尺寸某比例</h5>
                                            <div class="demo-wrapper" id="scroll08-b">
                                                <ul>
                                                    <li>子元素1</li>
                                                    <li>子元素2</li>
                                                    <li>子元素3</li>
                                                    <li>子元素4</li>
                                                    <li>子元素5</li>
                                                    <li>子元素6</li>
                                                    <li>子元素7</li>
                                                    <li>子元素8</li>
                                                    <li>子元素9</li>
                                                    <li>子元素10</li>
                                                    <li>子元素11</li>
                                                    <li>子元素12</li>
                                                    <li>子元素13</li>
                                                    <li>子元素14</li>
                                                    <li>子元素15</li>
                                                    <li>子元素16</li>
                                                    <li>子元素17</li>
                                                    <li>子元素18</li>
                                                    <li>子元素19</li>
                                                    <li>子元素20</li>
                                                </ul>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <h5>值模式，漂移指定距离</h5>
                                            <div class="demo-wrapper" id="scroll08-z">
                                                <ul>
                                                    <li>子元素1</li>
                                                    <li>子元素2</li>
                                                    <li>子元素3</li>
                                                    <li>子元素4</li>
                                                    <li>子元素5</li>
                                                    <li>子元素6</li>
                                                    <li>子元素7</li>
                                                    <li>子元素8</li>
                                                    <li>子元素9</li>
                                                    <li>子元素10</li>
                                                    <li>子元素11</li>
                                                    <li>子元素12</li>
                                                    <li>子元素13</li>
                                                    <li>子元素14</li>
                                                    <li>子元素15</li>
                                                    <li>子元素16</li>
                                                    <li>子元素17</li>
                                                    <li>子元素18</li>
                                                    <li>子元素19</li>
                                                    <li>子元素20</li>
                                                </ul>
                                            </div>
                                        

                                            new axScroll('#scroll08',{
                                                drift: {
                                                    //滚动距离变得很远
                                                    timeTHR: 500,
                                                    //变得很灵敏
                                                    distTHR: 4,
                                                }
                                            });
                                            new axScroll('#scroll08-n',{
                                                drift: {
                                                    mode: 'neighbor'
                                                }
                                            });
                                            new axScroll('#scroll08-a',{
                                                snap: {
                                                    enable: true,
                                                    unsnaped: '.unsnaped'
                                                },
                                                drift: {
                                                    mode: 'snap'
                                                }
                                            });
                                            new axScroll('#scroll08-b',{
                                                drift: {
                                                    mode: 0.5
                                                }
                                            });
                                            new axScroll('#scroll08-z',{
                                                drift: {
                                                    mode: 200,
                                                }
                                            });
                                        

                                            <同上>
                                        

                                    <h5>neighbor模式，滚动到鼠标悬浮节点的下个兄弟节点</h5>
                                    <div class="demo-wrapper" id="scroll30-n">
                                        <ul>
                                            <li>子元素1</li>
                                            <li>子元素2</li>
                                            <li>子元素3</li>
                                            <li>子元素4</li>
                                            <li>子元素5</li>
                                            <li>子元素6</li>
                                            <li>子元素7</li>
                                            <li>子元素8</li>
                                            <li>子元素9</li>
                                            <li>子元素10</li>
                                            <li>子元素11</li>
                                            <li>子元素12</li>
                                            <li>子元素13</li>
                                            <li>子元素14</li>
                                            <li>子元素15</li>
                                            <li>子元素16</li>
                                            <li>子元素17</li>
                                            <li>子元素18</li>
                                            <li>子元素19</li>
                                            <li>子元素20</li>
                                        </ul>
                                    </div>

                                    <div class="ax-break"></div>

                                    <h5>snap模式，滚动到下一个可吸附元素</h5>
                                    <div class="demo-wrapper" id="scroll30-a">
                                        <ul>
                                            <li>子元素1</li>
                                            <li class="unsnaped">子元素2（不可吸附）</li>
                                            <li>子元素3</li>
                                            <li class="unsnaped">子元素4（不可吸附）</li>
                                            <li>子元素5</li>
                                            <li>子元素6</li>
                                            <li class="unsnaped">子元素7（不可吸附）</li>
                                            <li>子元素8</li>
                                            <li>子元素9</li>
                                            <li>子元素10</li>
                                            <li class="unsnaped">子元素11（不可吸附）</li>
                                            <li>子元素12</li>
                                            <li>子元素13</li>
                                            <li>子元素14</li>
                                            <li class="unsnaped">子元素5（不可吸附）</li>
                                            <li>子元素16</li>
                                            <li>子元素17</li>
                                            <li>子元素18</li>
                                            <li>子元素19</li>
                                            <li>子元素20</li>
                                        </ul>
                                    </div>

                                    <div class="ax-break"></div>

                                    <h5>比例模式，滚动外容器尺寸某比例</h5>
                                    <div class="demo-wrapper" id="scroll30-b">
                                        <ul>
                                            <li>子元素1</li>
                                            <li>子元素2</li>
                                            <li>子元素3</li>
                                            <li>子元素4</li>
                                            <li>子元素5</li>
                                            <li>子元素6</li>
                                            <li>子元素7</li>
                                            <li>子元素8</li>
                                            <li>子元素9</li>
                                            <li>子元素10</li>
                                            <li>子元素11</li>
                                            <li>子元素12</li>
                                            <li>子元素13</li>
                                            <li>子元素14</li>
                                            <li>子元素15</li>
                                            <li>子元素16</li>
                                            <li>子元素17</li>
                                            <li>子元素18</li>
                                            <li>子元素19</li>
                                            <li>子元素20</li>
                                        </ul>
                                    </div>

                                    <div class="ax-break"></div>

                                    <h5>值模式，滚动指定距离</h5>
                                    <div class="demo-wrapper" id="scroll30-z">
                                        <ul>
                                            <li>子元素1</li>
                                            <li>子元素2</li>
                                            <li>子元素3</li>
                                            <li>子元素4</li>
                                            <li>子元素5</li>
                                            <li>子元素6</li>
                                            <li>子元素7</li>
                                            <li>子元素8</li>
                                            <li>子元素9</li>
                                            <li>子元素10</li>
                                            <li>子元素11</li>
                                            <li>子元素12</li>
                                            <li>子元素13</li>
                                            <li>子元素14</li>
                                            <li>子元素15</li>
                                            <li>子元素16</li>
                                            <li>子元素17</li>
                                            <li>子元素18</li>
                                            <li>子元素19</li>
                                            <li>子元素20</li>
                                        </ul>
                                    </div>
                                        

                                            new axScroll('#scroll30-n',{
                                                distMouse:  'neighbor',
                                            });
                                            new axScroll('#scroll30-a',{
                                                snap: {
                                                    enable: true,
                                                    unsnaped: '.unsnaped'
                                                },
                                                distMouse:  'snap',
                                            });
                                            new axScroll('#scroll30-b',{
                                                distMouse: 0.5,
                                                
                                            });
                                            new axScroll('#scroll30-z',{
                                                distMouse:200,
                                            });
                                        

                                            <同上>
                                        

                                            <div class="demo-wrapper" id="scroll09">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll09',{
                                                onBeforeToStart: function (percent) {
                                                    console.log('完成了', percent);
                                                    new axMessage({
                                                        content:'完成了，2秒后回弹！'
                                                    }).show();
                                                    setTimeout(()=>{
                                                        this.toStart();
                                                    },2000)
                                                },
                                                onBeforeToEnd: function (percent) {
                                                    console.log('完成了', percent);
                                                    new axMessage({
                                                        content:'完成了，立即回弹！'
                                                    }).show();
                                                    return true;
                                                },
                                            });
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="scroll10">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li id="child12">子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li id="child20">子元素20</li>
                                            </ul>
                                            <div class="demo-start"><u>正在加载...</u><i></i></div>
                                            <div class="demo-end"><u>正在加载...</u><i></i></div>
                                        </div>
                                        <div class="ax-break"></div>
                                        <button class="ax-btn" id="toEnd">到尾</button>
                                        <button class="ax-btn" id="toStart">到头</button>
                                        <button class="ax-btn" id="to500">平滑滚到-500px</button>
                                        <button class="ax-btn" id="to12">平滑滚到子元素12</button>
                                        <button class="ax-btn" id="to20">平滑滚到子元素20</button>
                                        <button class="ax-btn" id="to300">直接定位到-300px</button>
                                        

                                            let me = new axScroll('#scroll10',{
                                                onBeforeToEnd: function (percent) {
                                                    if (percent >= 1) {
                                                        let item = axAddElem('li', '', '尾部新增子元素' + percent);
                                                        this.wrapperDom.appendChild(item);
                                                        //尾部追加子元素不会导致translate偏移量改变
                                                    }
                                                    return true;
                                                },
                                                onBeforeToStart: function (percent) {
                                                    if (percent >= 1) {
                                                        let item = axAddElem('li', '', '头部新增子元素' + percent);
                                                        this.wrapperDom.insertAdjacentElement('afterbegin', item);
                                                        let size = item.getBoundingClientRect().height;
                                                        //头部追加子元素会导致translate偏移量改变，所以需要传入新增加的size（高度）
                                                        this.addTranslate(size);
                                                    }
                                                    return true;
                                                }
                                            }),
                                                toStart = document.querySelector('#toStart'),
                                                toEnd = document.querySelector('#toEnd'),
                                                to500 = document.querySelector('#to500'),
                                                to300 = document.querySelector('#to300'),
                                                to12 = document.querySelector('#to12'),
                                                to20 = document.querySelector('#to20'),
                                                loadingStart = me.targetDom.querySelector('.demo-start'),
                                                iStart = loadingStart.querySelector('i'),
                                                uStart = loadingStart.querySelector('u'),
                                                loadingEnd = me.targetDom.querySelector('.demo-end'),
                                                iEnd = loadingEnd.querySelector('i'),
                                                uEnd = loadingEnd.querySelector('u');
                                            toStart.onclick = () => {
                                                me.toStart();
                                            }
                                            toEnd.onclick = () => {
                                                me.toEnd();
                                            }
                                            to500.onclick = () => {
                                                me.scrollTo(-500);
                                            }
                                            to300.onclick = () => {
                                                me.locateTo(-300);
                                            }
                                            to12.onclick = () => {
                                                me.scrollTo('#child12');
                                            }
                                            to20.onclick = () => {
                                                me.scrollTo('#child20');
                                            }
                                            me.on('exceed', (percent, placement) => {
                                                if (placement === 'start') {
                                                    loadingStart.setAttribute('show', '');
                                                    if (percent >= 1) {
                                                        uStart.innerHTML = '拖拽完成！松开可追加子节点！';
                                                        iStart.innerHTML = '';
                                                    } else {
                                                        iStart.innerHTML = percent;
                                                    }
                                                } else if (placement === 'end') {
                                                    loadingEnd.setAttribute('show', '');
                                                    if (percent >= 1) {
                                                        uEnd.innerHTML = '拖拽完成！松开可追加子节点！';
                                                        iEnd.innerHTML = '';
                                                    } else {
                                                        iEnd.innerHTML = percent;
                                                    }
                                                }
                                            }).on('toStart', () => {
                                                loadingStart.removeAttribute('show');
                                                uStart.innerHTML = '正在加载...';
                                            }).on('toEnd', () => {
                                                loadingEnd.removeAttribute('show');
                                                uEnd.innerHTML = '正在加载...';
                                            });
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="scroll17">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li id="pos">子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        <div class="ax-break"></div>
                                        <button class="ax-btn" id="startAdd">头部追加子元素保持不动</button>
                                        <button class="ax-btn" id="startAddTo">头部追加子元素回弹</button>
                                        <button class="ax-btn" id="endAdd">尾部追加子元素</button>
                                        <button class="ax-btn" id="endAddTo">尾部追加子元素回弹</button>
                                        <button class="ax-btn" id="startAddManual">头部手动添加子元素</button>
                                        <button class="ax-btn" id="endAddManual">尾部手动添加子元素</button>
                                        <button class="ax-btn" id="indexAdd">在第三个子节点后添加子元素</button>
                                        <button class="ax-btn" id="idAdd">在指定子节点后添加子元素</button>
                                        

                                            let addIns = new axScroll('#scroll17', {
                                                barShow: true,
                                            }),
                                                startAdd = document.querySelector('#startAdd'),
                                                startAddTo = document.querySelector('#startAddTo'),
                                                endAdd = document.querySelector('#endAdd'),
                                                endAddTo = document.querySelector('#endAddTo'),
                                                startAddManual = document.querySelector('#startAddManual'),
                                                endAddManual = document.querySelector('#endAddManual'),
                                                indexAdd = document.querySelector('#indexAdd'),
                                                idAdd = document.querySelector('#idAdd');
                                            startAdd.onclick = () => {
                                                let time = new Date().valueOf(),
                                                    doms = [axAddElem('li', '', `头部新元素01-${time}`), axAddElem('li', '', `头部新元素02-${time}`)];
                                                addIns.add(doms, { placement: 'start', fixed: true })
                                            }
                                            startAddTo.onclick = () => {
                                                let time = new Date().valueOf(),
                                                    doms = [axAddElem('li', '', `头部新元素03-${time}`), axAddElem('li', '', `头部新元素04-${time}`)];
                                                addIns.add(doms, { placement: 'start', fixed: false })
                                            }
                                            endAdd.onclick = () => {
                                                let time = new Date().valueOf(),
                                                    doms = [axAddElem('li', '', `尾部新元素01-${time}`), axAddElem('li', '', `尾部新元素02-${time}`)];
                                                addIns.add(doms, { placement: 'end', fixed: true })
                                            }
                                            endAddTo.onclick = () => {
                                                let time = new Date().valueOf(),
                                                    doms = [axAddElem('li', '', `尾部新元素03-${time}`), axAddElem('li', '', `尾部新元素03-${time}`)];
                                                addIns.add(doms, { placement: 'end', fixed: false })
                                            }
                                            startAddManual.onclick = () => {
                                                let item = axAddElem('li', '', '头部新增子元素');
                                                addIns.wrapperDom.insertAdjacentElement('afterbegin', item);
                                                let size = item.getBoundingClientRect().height;
                                                //头部追加子元素会导致translate偏移量改变，所以需要传入新增加的size（高度）
                                                addIns.addTranslate(size);
                                            }
                                            endAddManual.onclick = () => {
                                                let item = axAddElem('li', '', '尾部新增子元素');
                                                addIns.wrapperDom.insertAdjacentElement('beforeend', item);
                                                addIns.updateDiff();
                                                addIns.toEnd();
                                            }
                                            indexAdd.onclick = () => {
                                                let time = new Date().valueOf(),
                                                    doms = [axAddElem('li', '', `index=2后新元素01-${time}`), axAddElem('li', '', `index=2后新元素02-${time}`)];
                                                addIns.add(doms, { placement: 2 })
                                            }
                                            idAdd.onclick = () => {
                                                let time = new Date().valueOf(),
                                                    doms = [axAddElem('li', '', `#id后新元素01-${time}`), axAddElem('li', '', `#id后新元素02-${time}`)];
                                                addIns.add(doms, { placement: '#pos' })
                                            }
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="scroll117">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li id="pos2">子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        <div class="ax-break"></div>
                                        <button class="ax-btn" id="startRemove">删除第一个</button>
                                        <button class="ax-btn" id="endRemove">删除最后一个</button>
                                        <button class="ax-btn" id="indexRemove">删除第三个</button>
                                        <button class="ax-btn" id="idRemove">删除指定节点</button>
                                        

                                            let removeIns = new axScroll('#scroll117', {
                                                barShow: true,
                                            }),
                                                startRemove = document.querySelector('#startRemove'),
                                                endRemove = document.querySelector('#endRemove'),
                                                indexRemove = document.querySelector('#indexRemove'),
                                                idRemove = document.querySelector('#idRemove');
                                            startRemove.onclick = () => {
                                                removeIns.remove('start')
                                            }
                                            endRemove.onclick = () => {
                                                removeIns.remove('end')
                                            }
                                            indexRemove.onclick = () => {
                                                removeIns.remove(2)
                                            }
                                            idRemove.onclick = () => {
                                                removeIns.remove('#pos2')
                                            }
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="scroll19">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
    
                                        <div class="ax-break"></div>
    
                                        <div class="demo-wrapper" id="scroll20">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll19',{
                                                snap:{enable:true},
                                                onEnd: function () {
                                                    console.log(this.snaped);
                                                }
                                            });
                                            new axScroll('#scroll20',{
                                                paddingStart:100,
                                                snap:{enable:true},
                                                onEnd: function () {
                                                    console.log(this.snaped);
                                                }
                                            });
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="scroll25">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
    
                                        

                                            new axScroll('#scroll25',{
                                                snap: {
                                                    enable: true,
                                                    //距离起始线前后20px才吸附
                                                    offset:20,
                                                },
                                            });
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="scroll24">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li class="unsnaped">子元素3（不可被吸附）</li>
                                                <li class="unsnaped">子元素4（不可被吸附）</li>
                                                <li class="unsnaped">子元素5（不可被吸附）</li>
                                                <li >子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li class="unsnaped">子元素9（不可被吸附）</li>
                                                <li class="unsnaped">子元素10（不可被吸附）</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        

                                            new axScroll('#scroll24',{
                                                snap:{
                                                    enable:true,
                                                    unsnaped:'.unsnaped'
                                                },
                                            });
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="scroll23">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
                                        <div id="content" style="display: none;">
                                            <li>唐朝</li>
                                            <li>宋朝</li>
                                            <li>元朝</li>
                                            <li>明朝</li>
                                            <li>清朝</li>
                                            <li>民国</li>
                                            <li>共和国</li>
                                        </div>
    
                                        <div class="ax-break"></div>
    
                                        <button class="ax-btn" id="contentBtn">更新内容</button>
    
                                        

                                            let contentIns = new axScroll('#scroll23',{
                                                barShow: true,
                                            }),
                                                contentBtn = document.querySelector('#contentBtn');
                                            contentBtn.onclick = () => {
                                                contentIns.updateContent('#content');
                                            }
                                        

                                            <同上>
                                        

                                        <div class="demo-wrapper" id="destroy">
                                            <ul>
                                                <li>子元素1</li>
                                                <li>子元素2</li>
                                                <li>子元素3</li>
                                                <li>子元素4</li>
                                                <li>子元素5</li>
                                                <li>子元素6</li>
                                                <li>子元素7</li>
                                                <li>子元素8</li>
                                                <li>子元素9</li>
                                                <li>子元素10</li>
                                                <li>子元素11</li>
                                                <li>子元素12</li>
                                                <li>子元素13</li>
                                                <li>子元素14</li>
                                                <li>子元素15</li>
                                                <li>子元素16</li>
                                                <li>子元素17</li>
                                                <li>子元素18</li>
                                                <li>子元素19</li>
                                                <li>子元素20</li>
                                            </ul>
                                        </div>
    
                                        <div class="ax-break"></div>
    
                                        <button class="ax-btn" id="destroyBtn">销毁</button>
                                        <button class="ax-btn" id="initBtn">初始化</button>
    
                                        

                                            let destroyIns = new axScroll('#destroy'),
                                                destroyBtn = document.querySelector('#destroyBtn'),
                                                initBtn = document.querySelector('#initBtn');
                                            destroyBtn.onclick = () => {
                                                destroyIns.destroy(()=>{
                                                    alert('实例销毁了');
                                                });
                                            }
                                            initBtn.onclick = () => {
                                                destroyIns.init(()=>{
                                                    alert('实例初始化了');
                                                });
                                            }
                                        

                                            <同上>