js 鼠标按住内容实现滚动内容 实现滚动条滚动效果

Question

就是不用右边的滚动条,,然后里面的vvvvvvv文字鼠标按住后,拖动它可以上下滚动,达到滚动条效果..

Answer 1

mousedown后添加mousemove事件，判断鼠标y轴移动方向，设置容器scrollTop就可以滚动了。。不过你要禁止选择内容，要不选中内容不太好看。。

 <style>
.noselect{ -moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;}</style>
<div style="width:100px;height:100px;border:solid 1px #000;overflow:auto;" onselectstart="return false" id="dv">
是不用右边的滚动条,,然后里面的vvvvvvv文字鼠标按住后,拖动它可以上下滚动,达到滚动条效果..
</div>
<script>
    window.onload = function () {
        var dv = document.getElementById('dv'), oy;
        function mousemove(e) {
            e = e || window.event;
            dv.scrollTop = e.clientY - oy;
        }
        function mouseup() {
            dv.className = '';
            dv.onmouseup = dv.onmousemove = null;
        }
        dv.onmousedown = function (e) {
            dv.onmousemove = mousemove;
            dv.onmouseup = mouseup;
            e = e || window.event;
            oy = e.clientY;
            dv.className = 'noselect';
        }
    }
</script>