Community Learn Tools Library Leisure
search
English
javascript - 崩溃了，求大神帮我调一个bug。。
高洛峰
高洛峰 2017-04-11 12:37:03
0
2
325
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.css">
    <script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.concat.min.js"></script>
    <style type="text/css">
        input{
            display: block;
        }
    </style>
</head>
<body>

    <p id="parent" style="overflow:auto;height:700px;width: 400px;">
        <p id="child" style="overflow:auto;height:300px;width: 200px;">
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
        </p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
    </p>
    <script>
        (function($){
            $(window).on("load",function(){
                $("#parent,#child").mCustomScrollbar({
                    theme: "dark"
                });
                $("#child").on("mousedown",function(evt){
                    evt.preventDefault();
                });
            });
        })(jQuery);
    </script>
</body>
</html>

用了一个滚动条插件mCustomScrollbar，现在遇到一个问题，举个例子（代码如上），有两个p（#parent和#child）当parent的滚动条滚到最顶部，child滚动条滚到最底部，然后点击child最底部的几个checkbox时会出一个bug就是parent会突然像锚点链接似的跳转到下面，哎，调了一下午了都没找到问题出在哪，求大神解答？谢谢谢谢谢谢谢谢谢谢！！！！

更新：问题仍然没有解决，求知道或用过这个插件的大神帮忙看看，谢谢了！

这是插件官网：mCustomScrollbar
引用的CSS：Css
引用的js：JS

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

reply all(2)
巴扎黑
巴扎黑2017-04-11 12:39:03 2 floor

加一句

$("#child").on("mousedown",function(evt){
    evt.preventDefault();
});

由于我的浏览器不是每次都会有你说的问题，不知道是否有效果，这样改了之后。我试了十几次都是好的，之前两次里就有一次。

估计是因为浏览器错误的估计了元素的相对位置和从属关系

Like +0
Add Reply
Peter_Zhu
Peter_Zhu2017-04-11 12:39:03 1 floor

把“mousedown”改为“click”点击文字没有问题了，但点击checkbox又会了。。。不使用插件就没有问题,so,给你一个不要插件的解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    ::-webkit-scrollbar{width:2px;height:2px}
    ::-webkit-scrollbar-button:vertical{display:none}
    ::-webkit-scrollbar-track:vertical{background-color:transparent}
    ::-webkit-scrollbar-track-piece{background:rgb(214,214,214);border-radius:5px}
    ::-webkit-scrollbar-thumb:vertical{background-color:#8E8E8E;border-radius:5px}
    ::-webkit-scrollbar-thumb:vertical:hover{background-color:#3B3B3B}
    ::-webkit-scrollbar-corner:vertical{background-color:#535353}
    ::-webkit-scrollbar-resizer:vertical{background-color:#FF6E00}
    
    input{
        display: block;
    }
    </style>
</head>
<body>

    <p id="parent" style="overflow:auto;height:700px;width: 400px;">
        <p id="child" style="overflow:auto;height:300px;width: 200px;">
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
            <label><input type="checkbox" name="">点文字试试</label>
        </p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
        <p>1111111111</p>
    </p>
    
</body>
</html>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template