jquery - mCustomScrollbar 不起作用(垂直滚动)，我的列鼠标滚轮非常非常慢-6ren

jquery - mCustomScrollbar 不起作用(垂直滚动)，我的列鼠标滚轮非常非常慢

转载作者：行者123 更新时间：2023-12-03 22:52:00

三天以来我非常沮丧。没有人能解决这个问题，我明天有一个演示...对于水平滚动、firefox chrome、平板电脑来说一切都很好...但是任何内容的垂直滚动都很奇怪，运行一点然后停止。而且我必须等待 3/4 秒才能再次滚动...而且，鼠标滚轮非常慢。我把我的代码贴出来，希望有人能看到它并帮助我:

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

    <title></title>

    <link href="player/video-js.css" rel="stylesheet"/>
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/estilosyfnext.css" rel="stylesheet" type="text/css" />

    <script src="js/customScrollBarMobile.js" type="text/javascript"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
    <script src="js/jquery.form.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="player/video.js"></script>
    <script src="js/jquery.mCustomScrollbar.js"></script>
    <link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />





    <script>

        $(function(){
        $('#contact').validate({
        submitHandler: function(form) {
        $(form).ajaxSubmit({
        url: 'process.php',
        success: function() {
        $('#contact').hide();
        $('#contact-form').append("<p class='thanks'>¡Gracias! Su formulario ha sido enviado.</p>")
        }
        });
        }
        });
        });

    </script>

    <script>
        $(function(){
            $("#contenedorP").wrapInner("<table cellspacing='0'><tr>");
            $(".post").wrap("<td></td>");
            $("body").mousewheel(function(event, delta) {
                this.scrollLeft -= (delta * 30);
                event.preventDefault();
            });   
        });

    </script>


    <script>

        $(document).ready(function () {

            $(".post").fadeTo(1, 0.8);
            $( "#contenedorP" ).draggable({ axis: 'x' });
            $(".post").hover(
                function () {
            $(this).find("#scroll_column").fadeTo("normal", 1);
            $(this).fadeTo("fast",     1);
                },
            function () {
            $(this).find("#scroll_column").fadeTo("normal", 0); 
            $(this).fadeTo("normal", 0.8);
            }
            ); 

            //Moveme//
            // CALCULO HASTA DONDE SE TIENE QUE DESPLAZAR LA CAPA//
            $('#flekdek').click(function() {  
                if ($(':animated').length) {
                    return false;
                }

                if($('#wrapper').width() - $(window).width() + $('#wrapper').position().left >= 0) {
                    $('#wrapper').animate({left: '-=780'}, 1500, "easeOutQuad", function() {

                        console.debug("position " + $('#wrapper').position().left + "ancho total " + $('#wrapper').width() + 
                                        "ancho ventana " + $(window).width());

                    });
                }

            });

            $('#flekizq').click(function(e) {  

                // console.debug("offset " + $('#wrapper').offset().left + " position " + $('#wrapper').position().left + 
                //                              "ancho total de la capa" + $('#wrapper').width() + "ancho ventana " + $(window).width());

                if ($('#wrapper').position().left!=0)
                { 
                    if ($(':animated').length) {
                        return false;
                    }

                    $('#wrapper').animate({left: '+=780'}, 1500, "easeOutQuad", function() {

                    }); 
                 }
            });

        });

        //fade in//
        $(function() {
            $("#contenedorP").fadeIn(1000);

            $('div').on('click', function(){
                 $('#flekdek').click();
                 return false;
            });
        });


        //scroll everywhere//
        (function($){
            $(document).ready(function(){
                $(".content").mCustomScrollbar({mouseWheel:true});
            });
        })(jQuery);

</script>

<script>

//MY fix div para izquierda derecha//
    $('#fixed').bind('mousewheel', function(e){
        var scrollTo= (e.wheelDelta*-1) + $('#wrapper').scrollTop();
        $("#wrapper").scrollTop(scrollTo);
    });


// ir al div elegido no funciona //

        jQuery(document).ready(function($) {

        $(".scroll").click(function(event){     
            event.preventDefault();
            $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
        });
    });

</script>


<script type="text/javascript">
$("#wrapper").mCustomScrollbar(
"vertical",200,"easeOutCirc",1.05,"auto","yes","yes",10
);
if (jQuery.browser.mobile == true) {
$("#wrapper").mCustomScrollbarMobile("vertical",200,5); 
}

</script>



</head>

<body>
<!--flechas-->
    <div id="flekizq" class="left_button"><img src="img/flecha_left.png" alt=""></DIV>
       <div id="flekdek" class="right_button"><img src="img/flecha_right.png" alt=""></DIV>

    <div id="top">
    <h1 id="topmenu">menu</h1>
    <div id="menutop">      
            <ul>
            <li><a href="#div00" class="scroll">00</a></li>
            <li><a href="#div04" class="scroll">01</a></li>
            <li><a href="#div05" class="scroll">02</a></li>
            <li><a href="#div06" class="scroll">03</a></li>
            <li><a href="#div07" class="scroll">04</a></li>
            <li><a href="#div08b" class="scroll">05</a></li>
            <li><a href="#div08" class="scroll">06</a></li>
            <li><a href="#div09" class="scroll">07</a></li>
            <li><a href="#div10" class="scroll">08</a></li>
            <li><a href="#div11" class="scroll">09</a></li>
            <li><a href="#div12" class="scroll">10</a></li>
            <li><a href="#div13" class="scroll">11</a></li>
            </ul>
    </div>


    <div id="nextcopy">ENVIAR UN EMAIL</a></div>

    </div>



<div id="contenedorP" class="fadeOnLoad">



    <div id="wrapper">



        <div class="post">
        <div id="div00" class="content"></div>
        <div id="div01" class="content">
        <p><img src="img/C01.png" alt=""/></p>
            </div>
        </div>


        <div class="post">
            <div id="div02"class="content">

        <p><img src="img/C02a.jpg" alt="" ></p>
        <p><img src="img/C02c.jpg" alt="" ></p>
        <p><img src="img/C02d.jpg" alt="" ></p>
        <p><img src="img/C02formuoff.jpg" alt="" ></p>
        <!--temp formulario-- ponerlo al final -->

        <div id="contact-form">    

        <form id="contact" method="post" action="">
        <fieldset>    

        <label for="name">Nombre</label>
        <input type="text" name="name">

        <label for="email">E-mail</label>
        <input type="email" name="email">

        <label for="phone">Tlf.</label>
        <input type="text" name="phone">

        <label for="website">Web Site</label>
        <input type="url" name="url">

        <label for="message">Su pregunta/Commentario</label>
        <textarea name="message"></textarea>

        <input type="submit" name="submit" id="submit" value="Send Message" />

        </fieldset>
        </form>

        </div><!-- /end #contact-form -->       

        <p><img src="img/C02e.jpg" alt="" ></p>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </div>
        </div> 

        <div class="post">

            <div id="div03"class="content">

            <p><img class="menuHover" src="img/menu/menuT.png" alt=""></p>
            <p><a href="#div00" class="scroll"><img class="menuHover" src="img/menu/menu01.png" alt=""></a></p>
            <p><a href="#div04" class="scroll"><img class="menuHover" src="img/menu/menu02.png" alt=""></a></p>
            <p><a href="#div05" class="scroll"><img class="menuHover" src="img/menu/menu03.png" alt=""></a></p>
            <p><a href="#div06" class="scroll"><img class="menuHover" src="img/menu/menu04.png" alt=""></a></p>
            <p><a href="#div07" class="scroll"><img class="menuHover" src="img/menu/menu05.png" alt=""></a></p>
            <p><a href="#div08b" class="scroll"><img class="menuHover" src="img/menu/menu06.png" alt=""></a></p>
            <p><a href="#div08" class="scroll"><img class="menuHover" src="img/menu/menu07.png" alt=""></a></p>
            <p><a href="#div09" class="scroll"><img class="menuHover" src="img/menu/menu08.png" alt=""></a></p>
            <p><a href="#div10" class="scroll"><img class="menuHover" src="img/menu/menu09.png" alt=""></a></p>
            <p><a href="#div11" class="scroll"><img class="menuHover" src="img/menu/menu10.png" alt=""></a></p>
            <p><a href="#div12" class="scroll"><img class="menuHover" src="img/menu/menu11.png" alt=""></a></p>
            <p><img class="menuHover" src="img/menu/menupie.png"alt=""></a></p>



            </div>
        </div>

        <div class="post">
            <div id="div04" class="content">
            <p><img src="img/C04.jpg" alt="" ></p>
            </div>
        </div>

        <div class="post">
            <div id="div05" class="content">
            <p><img src="img/C05.jpg" alt="" ></p>
            </div>
        </div>

        <div class="post">
            <div id="div06"class="content">
            <p><img src="img/C06.jpg" alt="" ></p>  
            </div>
        </div>

        <div class="post">
            <div id="div07"class="content">
            <p><img src="img/C07.jpg" alt="" ></p>
            </div>
        </div>

        <div class="post">
            <div id="div08b"class="content">
            <p><img src="img/equipo.png" alt=""></p>
            <p class="E1rollover">xxxx</p>
            <p class="E2rollover">xxxx</p>
            <p class="E3rollover">xxx</p>
            <p class="E4rollover">xxxxx</p>
            <p class="E5rollover">xxxxx</p>
            <p class="E6rollover">xxxx</p>
            <p class="E7rollover">xxxx</p>
            <p class="E8rollover">xxxxx</p>
            <p class="E9rollover">xxxxx</p>
            <p class="E10rollover">xxxxx</p>
            </div>
        </div>

        <div class="post">
            <div id="div03"class="content">
            <p><img class="menuHover" src="img/menu/menuT.png" alt=""></p>
            <p><a href="#div00" class="scroll"><img class="menuHover" src="img/menu/menu01.png" alt=""></a></p>
            <p><a href="#div04" class="scroll"><img class="menuHover" src="img/menu/menu02.png" alt=""></a></p>
            <p><a href="#div05" class="scroll"><img class="menuHover" src="img/menu/menu03.png" alt=""></a></p>
            <p><a href="#div06" class="scroll"><img class="menuHover" src="img/menu/menu04.png" alt=""></a></p>
            <p><a href="#div07" class="scroll"><img class="menuHover" src="img/menu/menu05.png" alt=""></a></p>
            <p><a href="#div08b" class="scroll"><img class="menuHover" src="img/menu/menu06.png" alt=""></a></p>
            <p><a href="#div08" class="scroll"><img class="menuHover" src="img/menu/menu07.png" alt=""></a></p>
            <p><a href="#div09" class="scroll"><img class="menuHover" src="img/menu/menu08.png" alt=""></a></p>
            <p><a href="#div10" class="scroll"><img class="menuHover" src="img/menu/menu09.png" alt=""></a></p>
            <p><a href="#div11" class="scroll"><img class="menuHover" src="img/menu/menu10.png" alt=""></a></p>
            <p><a href="#div12" class="scroll"><img class="menuHover" src="img/menu/menu11.png" alt=""></a></p>
            <p><img class="menuHover" src="img/menu/menupie.png"alt=""></a></p>

            </div>
        </div>

        <div class="post">
            <div id="div08"class="content">
            <p><img src="img/C08.jpg" alt="" ></p>
            </div>
        </div>

        <div class="post">
            <div id="div09"class="content">
            <p><img src="img/C09.jpg" alt=""></p>
            </div>
        </div>

        <div class="post">
            <div id="div10"class="content">
            <p><img src="img/C10.jpg" alt=""></p>
            </div>
        </div>


        <div class="post">
            <div id="div11"class="content" style="background:white">

            <p><img src="img/videocab.jpg" alt=""></p>


            <video id="example_video_1" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_corona.jpg" preload="auto" data-setup="{}" style="background:white">
            <source type="video/mp4" src="videos/coronas.mp4"/>
            <source type='video/webm' src="videos/coronas.webm"/>
            </video>

            <video id="example_video_2" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_real.jpg" preload="auto" data-setup="{}" style="background:white">
            <source type="video/mp4" src="videos/real.mp4"/>
            <source type='video/webm' src="videos/real.webm"/>
            </video>


            <video id="example_video_3" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_oriflame.jpg" preload="auto" data-setup="{}" style="background:white">
            <source type="video/mp4" src="videos/globaldream.mp4"/>
            <source type='video/webm' src="videos/globaldream.webm"/>
            </video>


            <video id="example_video_4" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_carnaval.jpg" preload="auto" data-setup="{}" style="background:white">
            <source type="video/mp4" src="videos/carnaval.mp4"/>
            <source type='video/webm' src="videos/carnaval.webm"/>
            </video>

            <video id="example_video_5" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_india.jpg" preload="auto" data-setup="{}" style="background:white">
            <source type="video/mp4" src="videos/india.mp4"/>
            <source type='video/webm' src="videos/india.webm"/>
            </video>

            <p><img src="img/cortina_video.png" alt=""></p>

            <video id="example_video_6" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_traditions.jpg" preload="auto" data-setup="{}"style="background:white">
            <source type="video/mp4" src="videos/tradition.mp4"/>
            <source type='video/webm' src="videos/tradition.webm"/>
            </video>

            <video id="example_video_7" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_coronas2.jpg" preload="auto" data-setup="{}"style="background:white">
            <source type="video/mp4" src="videos/coronas2.mp4"/>
            <source type='video/webm' src="videos/coronas2.webm"/>
            </video>

            <video id="example_video_8" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_venecia.jpg" preload="auto" data-setup="{}"style="background:white">
            <source type="video/mp4" src="videos/venecia.mp4"/>
            <source type='video/webm' src="videos/venecia.webm"/>
            </video>

            <video id="example_video_9" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_suntory.jpg" preload="auto" data-setup="{}"style="background:white">
            <source type="video/mp4" src="videos/suntory.mp4"/>
            <source type='video/webm' src="videos/suntory.webm"/>
            </video>

            <video id="example_video_10" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_orangina.jpg" preload="auto" data-setup="{}"style="background:white">
            <source type="video/mp4" src="videos/origina.mp4"/>
            <source type='video/webm' src="videos/origina.webm"/>
            </video>

            </br>
            </br>


            </div>
        </div>


        <div class="post">
            <div id="div12"class="content">
            <p><img src="img/C12.jpg" alt=""></p>
            </div>
        </div>

        <div class="post">
            <div id="div13"class="content">
            <p><img src="img/C13.jpg" alt=""></p>
            </div>
        </div>


    </div>

</div>

    <div id="footer" style="clear:both">

                <!--Control wrapper DEKIZQ-->
            <ul>
            <!--li id="flekizq" align="center"><img src="img/flecha_left.png" alt=""></li>-->
            <li id="fleknext"align="center"><img src="img/logopeke.png" alt=""></li>
            <!--li id="flekdek" align="center"><img src="img/flecha_right.png" alt=""></li>-->
            </ul>
            <!--Control wrapper DEKIZQ-->

    </div>  




</body>
<script>
$(window).load(function() {
$(".content").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes");
});
</script>
</html>

我的CSS:

html {
            overflow: hidden;
        }

body { 
    font-size: 62.5%; 
    font-family: 'Lucida Grande', Helvetica, sans-serif;
    background: white;
    color: #999; 
    overflow-x: hidden;
    background: url(../img/BG2.jpg) repeat;

    }

#contenedorP{
    display:none; 
    position:absolute;

    left:0px;

}


#wrapper{
    height:555px;
    max-height:555px;
    position: absolute;  
    left:0px;
    -moz-box-shadow: 0px 6px 5px #888;
    -webkit-box-shadow: 0px 6px 5px #888;
    box-shadow: 0px 6px 5px #888;
    margin-top:22px;
    margin-bottom: 20px;
    padding-top: 2px;
    width: 4442px;
    overflow:hidden;
    background: white!important;

}

.left_button{

       POSITION:fixed;
       left:0px;
       top:300px;
       font-size:50px;
       margin-left: 5px;
       z-index:100;
       opacity: 0.4;
}
.right_button{

       POSITION:fixed;
       right:0px;
       top:300px;
       font-size:50px;
       margin-right:5px;
       z-index:100;
       opacity: 0.4;

}

.left_button:hover{

       POSITION:fixed;
       left:0px;
       top:300px;
       font-size:50px;
       z-index:100;
       opacity: 1;
}
.right_button:hover{

       POSITION:fixed;
       right:0px;
       top:300px;
       font-size:50px;
       z-index:100;
       opacity: 1;

}


#scroll_column{
   display:none;
}


#div03{
    background: #888888;
    margin-right:5px;
}

.menuHover{
    opacity: 1;
}

.menuHover:hover{
    opacity: 0.4;
}


#fixed { 
    position: fixed; 
    right: 50%;
    }


#menutop li{
    color: grey;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    margin-top: 6px;
    margin-left:5px;

}

#menutop li a{
    color: grey;
    text-decoration: none;

}

#menutop li a:hover{
    color: white;

}


#nextcopy{
    font-size: 14px;
    color: #C4C4C4;
    padding-right:85px;
    margin-right:5px;
    margin-top: -10px;
    float: right;
    background: url(../img/top_mail.jpg) center right no-repeat;
}

#nextcopy a{
    color: grey;
    text-decoration: none;

}

#nextcopy a:hover{
    color: white;

}


#footer{
    left:0px;
    margin-top: 5px;
    width: 100%;
    position: absolute;
    top: 590px;

}


#footer li#fleknext{
    text-align: center;
    margin-top:4px;
}

li#flekdek, li#flekizq{
    color: grey;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    margin-top: 3px;

}


.mCustomScrollBox a img{
    margin-right:-5px;
    margin-top:15px;

}

img:hover{
    cursor:pointer;
}

#top{
     z-index:99;
    background: black;
    height:25px;
    width: 100%;
    position:fixed;
    top:0px;
    -moz-box-shadow: 3px #888;
    -webkit-box-shadow:3px #888;
    box-shadow: 3px #888;

}

h1#topmenu{
    font-size: 14px;
    color: #C4C4C4;
    margin-left:25px;
    padding-top: 3px;
    float: left;
}



/*def*/
* {
    margin: 0; 
    padding: 0; 
}

tr { 
    vertical-align: top;
}
.post { 


}
p { 
    font-size: 1.2em; 
    margin: 0 0 05px 0; 
}

h2 { 
    font-family: Sans-serif; 
    font-size: 3.0em;
    letter-spacing: -1px; 
    color: #ccc; 
}

table, table td {
    padding: 0; border-spacing: 1px}
/*Init Scrolll*/
    {
        margin: 0;
        padding: 0;
    }


    .bsa_it_ad {
        padding: 8px 4px 8px 12px !important;
        position: relative;
        border: 0 !important;
        background: #D6D5D5 !important;
        border-top: 0 !important;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
        font: 11px "Lucida Grande", Sans-Serif !important;
    }
    .bsa_it_ad:before, .bsa_it_ad:after {
        content: "";
        position: absolute;
        top: 0;
        left: 6px;
        width: 100%;
        height: 100%;
        background: #989898;
        border-bottom: 6px solid #989898;
        z-index: -1;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    }
    .content{
        margin:0px;
        margin-top: 2px; 
        height:610px;
        max-height:610px; 
        padding:0px; 
        overflow:auto; 
        float:left; 
        /*background:#282828;
        background:#121212;*/
        }


    .bsa_it_ad:before {
        top: 0;
        left: 12px;
        z-index: -2;
        background: #6C6666;
        border-bottom: 12px solid #6C6666;
    }

    .bsa_it_ad a {
      margin: 0 !important;
        padding: 0 !important;
    }
    .bsa_it_ad a img {
      border: 0 !important;
        position: static !important;
    }
    .bsa_it_ad a:hover img {
        margin: 0 !important;
    }
    .bsa_it_ad a:hover {
      background: none !important;
    }
    .bsa_it_i {
        margin: 0 15px 0 0 !important;
    }
    .bsa_it_t {
        font-size: 14px !important;
        margin: 12px 0 0 0 !important;
    }
    .bsa_it_d {
        padding-right: 10px;
    }
    .bsa_it_p{
        display: none !important;
    }
    #demo-bar-ad {
        width: 416px;
        position: absolute;
        right: 0;
        top: -20px;
        font: 11px "Lucida Grande", Sans-Serif !important;
    }
    #bsap_aplink {
        position: absolute;
        color: #999;
        text-decoration: none;
        bottom: 8px !important;
        right: 8px !important;
        padding: 0 !important;
    }
    .bsa_it_p a:hover {
        background:none !important;
    }
    #demo-top-bar {
        text-align: left;
        background: #e18728;
        position: relative;
        zoom: 1;
        width: 100% !important;
        z-index: 6000;
        box-shadow: 0 0 10px black;
        padding: 20px 0 15px;
    }
    #demo-bar-inside {
        width: 960px;
        margin: 0 auto;
        position: relative;
    }
    #demo-top-bar:before, #demo-top-bar:after {
        content: "";
        position: absolute;
        top: 0;
        left: 6px;
        width: 100%;
        height: 100%;
        background: #e18728;
        border-bottom: 6px solid #8F5314;
        z-index: -1;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    }
    #demo-top-bar:before {
        top: 0;
        left: 12px;
        background: #6C6666;
        border-bottom: 12px solid #62390E;
    }

    #demo-bar-buttons {
        display: inline-block;
        width: 236px;
        text-align: center;
        vertical-align: top;
        font-size: 0;
    }
    #demo-bar-buttons a {
        font-size: 12px;
        color: white;
        display: block;
        margin: 2px 0;
        text-decoration: none;
        font: 14px "Lucida Grande", Sans-Serif !important;
    }
    #demo-bar-buttons a:hover,
    #demo-bar-buttons a:focus {
        color: #333;
    }

    #demo-bar-badge {
        display: inline-block;
        width: 302px;
        padding: 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
    }
    #demo-bar-badge a {
        display: block;
        width: 100%;
        height: 38px;
        border-radius: 0;
        bottom: auto;
        margin: 0;
        background: url(/images/examples-logo.png) no-repeat;
        background-size: 100%;
        overflow: hidden;
        text-indent: -9999px;
    }
    #demo-bar-badge:before, #demo-bar-badge:after {
        display: none !important;
    }

 /*Formulario*/

 /*-------------------------------------
FORM CORE
------------------------------------------*/

form#contact fieldset {
    padding: 10px 20px 20px 20px;
    margin: 0 auto;
    border: 0;
    background-color: #fff;
    width: 290px;
    text-align: left;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -moz-box-shadow: 0px 0px 10px #d3d3d3; 
    -webkit-box-shadow: 0px 2px 10px #d3d3d3; 
    box-shadow: 0px 0px 10px #d3d3d3; 
}

form#contact input[type="text"], input[type="url"], 
input[type="email"], input[type="tel"], textarea {
    margin: 3px 0 0 0;
    padding: 6px; 
    width: 260px; 
    font-family: arial, sans-serif; 
    font-size: 12px; 
    border: 1px solid #ccc;
    background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px);
}

form#contact textarea {
    width: 275px; 
    height: 150px;
}

form#contact label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-top: 10px;
    font-weight: bold;
}

form#contact label.error { 
    width: 270px;
    margin: 3px 0 0 0;
    display: block;
    color: #cf0101;                              
    font-size: 11px; 
    text-align: right;
}

form#contact .placeholder {
    color: #aaa;
}

form#contact .button {
    display: inline-block;
    margin: 15px 0 0 90px;
    padding: 5px 15px 5px 15px;
    background-color: #ff9e00;
    border: none;
    color: #fff;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

form#contact .button:hover {
    background-color: #fc8500;
    cursor: pointer;
}

form#contact .button:active {
    margin-top: 16px;
    background-color: #f08004;
    cursor: pointer;
}

最佳答案

调用

$(".content").mCustomScrollbar()

就一次，之后就只更新。另外，一定要在表生成后调用这个函数...代码比较困惑，多个ready...

关于jquery - mCustomScrollbar 不起作用(垂直滚动)，我的列鼠标滚轮非常非常慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14371866/

文章推荐： jquery - Autocomplete.js 不适用于键盘向上和向下箭头键

文章推荐： jQuery $(window).scroll 和 Internet Explorer (8-9)

文章推荐： jQuery UI 排序 - 两个列表并防止在原始列表内排序

文章推荐： jquery - 使用 getJson 方法检查 null 响应

ruby-on-rails - 在*非常*简单的应用程序中呈现*非常*简单的部分的问题
更新:随意给我反对票，因为问题是我将文件命名为 _stylesheet.html.erb 而不是 _stylesheets.html.erb。我以为我检查了拼写，但显然我没有。我很抱歉浪费了大家的时间
inno-setup - 当主安装程序(非常)静默运行时，子安装程序(非常)静默运行
我有一个 Inno Script istaller 在其中运行子 setup.exe 。当向主安装程序提供静默安装参数时，我必须向 setup.exe 提供静默安装参数。 Inno脚本运行命令: [R
indexing - 在大型数据库中搜索(非常)近似子串
我正在尝试在大型数据库中搜索长的、近似的子字符串。例如，一个查询可能是一个 1000 个字符的子字符串，它可能与匹配项相差数百个编辑的 Levenshtein 距离。我听说索引 q-gram 可以做到
iphone - iPad(非常)简单的绘图
我正在尝试在我的应用程序中实现一个非常简单的绘图 View 。这只是我的应用程序的一小部分，但它正在变成一个真正的麻烦。这是我到目前为止所拥有的，但它现在显示的只是莫尔斯电码，如点和线。 - (v
MySQL 查询运行*非常*慢
我有一个运行非常慢的 sql 查询，我很困惑为什么。查询是: SELECT DISTINCT(c.ID),c.* FROM `content` c LEFT JOIN `content_meta`
python - 非常 simplejson 解码
我搜索过这个，但我发现的所有结果对我来说都毫无意义，而且似乎太复杂了。我希望使用 json 或 simplejson 模块来获取对象中字符串的值。 string = '{"name": "Alex"}
c - 如何最好地模拟(非常)稀疏的概率密度函数？
我想编写一个流量生成器来复制正在运行的计算机对内存进行的原始读写需求。但是正在运行的计算机在其内存引用中也显示出(非常强的)局部性，并且在 64 位地址空间中，只会引用非常小范围的地址(事实上，我已
java - 当您需要存储(非常)大的数字时该怎么办？
我正在尝试做一个 Project Euler问题，但它涉及添加一个非常大的数字的数字。 (100!) 用Java的int和long太小了。谢谢你的建议最佳答案类 BigInteger看起来它可能
c++ - 物理模拟给出(非常)不准确的简单轨迹微积分位置
我想在游戏中实现一个物理引擎，以便计算物体在受力时的轨迹。该引擎将根据对象的先前状态计算对象的每个状态。当然，这意味着要在两个时间单位之间进行大量计算才能足够精确。为了正确地做到这一点，我首先想知道
C 用对应于索引的值初始化一个(非常)大的整数数组
Edit3:通过将数组的初始化限制为仅奇数进行优化。谢谢@Ronnie! Edit2:谢谢大家，看来我也无能为力了。编辑:我知道 Python 和 Haskell 是用其他语言实现的，并且或多或少地
c - 无需预洗牌即可生成(非常)大的非重复整数序列
背景我有一个我编写的简单媒体客户端/服务器，我想生成一个非显而易见的时间值，我随每个命令从客户端发送到服务器。时间戳将包含相当多的数据(纳秒分辨率，即使由于现代操作系统中定时器采样的限制，它并不真正
可能有*非常*多列的 MySql 表
一位招聘软件工程师的 friend 希望我为他开发一个应用。他希望能够根据技能搜索候选人的简历。正如您想象的那样，可能有数百、可能数千种技能。在表格中表示候选人的最佳方式是什么？我在想 skil
ios - NSURLSession dataTaskWithURL 非常 "slow"
我的意思是“慢”，回调类型等待远程服务器超时以有效触发(调用 vimeo 提要，解析它，然后在场景中显示 uiviews) 我大多不明白它是如何工作的。我希望在返回响应后立即从回调中填充我的 View
具有(非常)快速和可靠切换的 C++ 生产者消费者队列
您好，我正在研究使用快速可靠的生产者消费者队列进行线程切换。我正在使用 VC++ 在 Windows 上工作。我的设计基于 Anthony Williams队列，基本上就是一个带有 boost::c
c# - 具有大或*非常*大文件的 Resharper
我只是想知道您使用 resharper 的经验。我们有一个非常重的 dbml 文件，因为我们的数据库有很多表，每次我需要打开该文件时，我都会收到来自 resharper 的大量异常。以前有人遇到过这个
jquery - 隐藏/显示*非常*慢
我目前正在使用 jQuery 中的隐藏/显示功能来帮助从选择框中将表格过滤成组。实际代码运行良好，但速度非常慢，有时需要一两分钟才能执行。我切换了代码，所以它使用 css({'display':'
c# - Application.GetWindow() *非常*慢
我按顺序调用了以下两个方法(按顺序使用适当的类级别字段) public const string ProcessName = "This is" public const string WindowT
haskell - 有人可以用*非常*简单的术语解释反射包 API 吗？
我很难理解描述反射包的文档/示例。我是一名命令式编程老手，但也是一名 Haskell 新手。你能引导我完成一个非常简单的介绍吗？包裹:https://hackage.haskell.org/pack
.net - 是否有一个*非常*轻量级的 .net IDE？
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
python - 使用 Python 操作(非常)长的数据文件
我正在尝试编写一段代码来操作一个很长的文档(超过一百万行)。在这个文本文件中，有固定间隔(每 1003 行)和之间的某些时间戳有我需要的数据，它有 1000 行长，还有一个标题和两个空行，但我不需要。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - mCustomScrollbar 不起作用(垂直滚动)，我的列鼠标滚轮非常非常慢