这里只写了简单的拖动缓冲效果
该效果大部分都是用在了 拖动->到底->异步加载

html 部分

<div class="box">
    <div class="boxcon">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
        <p>21</p>
        <p>22</p>
        <p>23</p>
        <p>24</p>
        <p>25</p>
        <p>26</p>
        <p>27</p>
        <p>28</p>
        <p>29</p>
        <p>30</p>
        <p>31</p>
        <p>32</p>
        <p>33</p>
        <p>34</p>
        <p>35</p>
        <p>36</p>
        <p>37</p>
        <p>38</p>
        <p>39</p>
        <p>40</p> 
    </div>
</div>

js部分实现

var box = document.querySelector(".box");
var con = document.querySelector(".boxcon");
var start = false;
var parentY = box.offsetTop,childY=0;

con.addEventListener("mousedown",function(event){
    // console.log(event)
    childY = event.clientY;
    start = true;
},false)

con.addEventListener("mouseup",function(){
     this.removeAttribute("style")
     start = false;
},false)

con.addEventListener("mousemove",function(event){
    //y = 1/x;
    var mm = parseInt(window.getComputedStyle(box,null)["height"].replace("px",""))+box.scrollTop;
    var mmm = window.getComputedStyle(con,null)["height"].replace("px","");

    if (start && ((mm == mmm && childY >= event.clientY)  || (box.scrollTop ==0 &&  childY <= event.clientY))) {
        var yy = event.clientY-childY;
        var sy = yy>0 ? Math.sqrt(yy) : -Math.sqrt(Math.abs(yy));

        this.style.transform = "translate(0px,"+sy+"px)"
        // var _y = this.offsetTop - parentY;

    };
},false);

体验地址: http://works.ibeeger.com/dev/scroll/

文章来源: js拖动缓动效果方法实现