个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 22:52:00 29 4
gpt4 key购买 nike

三天以来我非常沮丧。没有人能解决这个问题，我明天有一个演示...对于水平滚动、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/

29 4 0
文章推荐： jquery - Autocomplete.js 不适用于键盘向上和向下箭头键
文章推荐： jQuery $(window).scroll 和 Internet Explorer (8-9)
文章推荐： jQuery UI 排序 - 两个列表并防止在原始列表内排序
文章推荐： jquery - 使用 getJson 方法检查 null 响应
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com