3天以来我非常沮丧。没有人能解决这个问题，我明天有一个演示文稿......水平滚动，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;
}