javascript - 这个滚动条拖动的时候为什么会不停地闪

问题描述

问 题

<div id="a">
    <div id="b"></div>
</div>
        

<style>
                #a{
                    width:20px;
                    height:200px;
                    background-color:#aaa;
                    position:relative;
                }
                #b{
                    width:100%;
                    height:15%;
                    background-color:palevioletred;
                    position:absolute;
                    top:0px;
                }
            </style>

/------------------js部分------------------------- /

            

$(function(){
                    $("#b").mousedown(function(e){
                        var y0=e.offsetY;
                        var top0=parseInt($(this).css("top"));
                        $(document).bind('mousemove',event,movey);
                        $(document).mouseup(function(){    
                            $(document).unbind("mousemove");    
                            })
        //定义鼠标移动时执行的函数                    
        function movey(){
                var y1=event.offsetY;
                var dis=y1-y0;
                var bili=(dis+y0) / (   $("#a").height()-$("#b").height()     )
                if(bili>=0&&bili<=1)
                    $("#b").css("top",dis+top0);
                    
                else if (bili>1)
                    $("#b").css("top",$("#a").height()-$("#b").height());
                    
                else
                    $("#b").css("top","0px");
            }
        }).mouseup(function(){
            $(document).unbind("mousemove"); //不能只给document绑定事件
            
        })
})

问题是为什么鼠标唾液的时候，滚动条会闪动，求大神指点
代码：https://jsfiddle.net/bbux0h7v/2/

解决方案

没有取消浏览器的默认事件。

function preventDef (e){
                e.preventDefault && e.preventDefault();
                e.stopPropagation && e.stopPropagation();
                e.cancelBubble = true;
                e.returnValue = false;
        },

这篇关于javascript - 这个滚动条拖动的时候为什么会不停地闪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！