Javascript 水平滚动在Google Chrome中不起作用
我正在为一个制作架构模型的人开发这个投资组合网站。对于画廊，我使用了一个现成的水平滚动代码。这段代码在Safari和Firefox中似乎可以正常工作，但在Chrome中，我遇到了一个奇怪的错误，涉及到轨迹板滚动 页面如下： 当使用镀铬的轨迹板滚动时，滚动条会自动回到起始位置。所以卷轴是不可能使用的。然而，使用“外部鼠标”它可以完美地工作。我还发现顶部的菜单按钮出错。按钮的右边框消失，仅在Chrome中 如果您能帮我解决这个问题，以及我应该如何在Chrome和其他浏览器中使用它，我将不胜感激 以下是我遇到问题的特定库页面的html：Javascript 水平滚动在Google Chrome中不起作用,javascript,jquery,google-chrome,Javascript,Jquery,Google Chrome,我正在为一个制作架构模型的人开发这个投资组合网站。对于画廊，我使用了一个现成的水平滚动代码。这段代码在Safari和Firefox中似乎可以正常工作，但在Chrome中，我遇到了一个奇怪的错误，涉及到轨迹板滚动 页面如下： 当使用镀铬的轨迹板滚动时，滚动条会自动回到起始位置。所以卷轴是不可能使用的。然而，使用“外部鼠标”它可以完美地工作。我还发现顶部的菜单按钮出错。按钮的右边框消失，仅在Chrome中 如果您能帮我解决这个问题，以及我应该如何在Chrome和其他浏览器中使用它，我将不胜感激 以
<html lang="en-GB">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description" content="Modellverkstaden">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="center.js"></script>
<script src="menu.js" type="text/javascript"></script>
<style>
.section {
display: block;
width: auto;
height: 500px;
max-height: 500px;
float: left;
margin-left: 20px;
}
.section img {
height: 100%;
position: relative;
}
p {margin-top: 1em;}
#content {
display: none!important;
padding-top: 6.3em!important;
}
img {
height: auto;
}
img.logo {
height: inherit;
}
@media only screen and (max-width: 800px) {
#content {
display: block!important;
}
img {
width: 100%;
}
img.logo {
width: inherit;
}
#top {
position: fixed;
}
}
</style>
<script src="Demo%20-%20Horizontal%20Scrolling-filer/jquery_002.js"></script>
<script src="Demo%20-%20Horizontal%20Scrolling-filer/jquery.js"></script>
<script>
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 1);
e.preventDefault();
});
});
</script>
<!-- Enable HTML5 for old browsers -->
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Modellverkstaden > Modeller</title>
</head>
<body>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<div id="hamburger"><a href="#" onclick="toggle_visibility('mob-menu');"><img src="pics/menu.png" /></a></div>
<div id="top" style="position: fixed!important;">
<ul>
<li style="border: none;padding-left: 0;padding-right: 0;margin-right: 2em;">
<label><a href="index.html"><img class="logo" src="pics/logo.png"></a> </label>
</li>
<li class="menu">
<a href="om.html">Om</a>
</li>
<li class="menu">
<a href="kontakt.html">Kontakt</a>
</li>
<li class="menu">
<a href="uppdragsgivare.html">Uppdragsgivare</a>
</li>
<li class="menu" id="active">
<a href="modeller.html">Modeller</a>
</li>
</ul>
</div>
<div id="mob-menu"><ul><li><a href="om.html">Om</a></li><li><a href="kontakt.html">Kontakt</a></li><li><a href="uppdragsgivare.html">Uppdragsgivare</a></li><li><a href="modeller.html">Modeller</a></li></ul></div>
<div id="content">
<h1>Modeller</h1>
<div id="images">
<img src="pics/IMAG1306.jpg"><p></p>
<img src="pics/blandat-055.jpg"><p></p>
<img src="pics/blandat-069.jpg">
<img src="pics/IMAG0237.jpg"><p></p>
<img src="pics/IMAG1263.jpg"><p></p>
<img src="pics/diverse-paris-och-Csh-21-371.jpg"><p> </p>
<img src="pics/IMG_1464.jpg"><p> </p>
<img src="pics/IMG_1442.jpg"><p> </p>
<img src="pics/IMG_1477.jpg"><p> </p>
<img src="pics/IMG_9043.jpg"><p> </p>
<img src="pics/IMG_9067.jpg">
<img src="pics/IMG_9071.jpg"><p> </p>
<img src="pics/IMG_9161.jpg"><p> </p>
<img src="pics/IMG_9201.jpg"><p> </p>
<img src="pics/IMG_9658.jpg"><p> </p>
<img src="pics/IMG_9692.jpg"><p> </p>
<img src="pics/juni-10-181.jpg"><p> </p>
<img src="pics/juni-10-198.jpg"><p> </p>
<img src="pics/Kajen-4-JM-2012-B3.jpg"><p> </p>
<img src="pics/modellv-ffs-016.jpg"><p> </p>
<img src="pics/modellverkstaden2-(1-of-12).jpg"><p> </p>
<img src="pics/modellverkstaden2-(2-of-12).jpg"><p> </p>
<img src="pics/modellverkstaden2-(7-of-12).jpg"><p> </p>
<img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-002.jpg"><p> </p>
<img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-009.jpg"><p> </p>
<img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-023.jpg"><p> </p>
<img src="pics/titti,barnen-mm20061028-073.jpg"><p> </p>
<img src="pics/B19219_012.jpg"><p></p>
<img src="pics/B19219_017.jpg">
<img src="pics/B19219_023.jpg">
</div>
</div>
<div id="filler"></div>
<div id="container">
<div class="section yellow"><img src="pics/IMAG1306.jpg"><p></p></div>
<div class="section"><img src="pics/blandat-055.jpg"><p></p></div>
<div class="section"><img src="pics/blandat-069.jpg"></div>
<div class="section yellow"><img src="pics/IMAG0237.jpg"><p></p></div>
<div class="section yellow"><img src="pics/IMAG1263.jpg"><p></p></div>
<div class="section yellow"><img src="pics/diverse-paris-och-Csh-21-371.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_1464.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_1442.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_1477.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9043.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9067.jpg"></div>
<div class="section yellow"><img src="pics/IMG_9071.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9161.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9201.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9658.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9692.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/juni-10-181.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/juni-10-198.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Kajen-4-JM-2012-B3.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellv-ffs-016.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellverkstaden2-(1-of-12).jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellverkstaden2-(2-of-12).jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellverkstaden2-(7-of-12).jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-002.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-009.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-023.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/titti,barnen-mm20061028-073.jpg"><p> </p></div>
<div class="section"><img src="pics/B19219_012.jpg"><p></p></div>
<div class="section"><img src="pics/B19219_017.jpg"></div>
<div class="section"><img src="pics/B19219_023.jpg"></div>
<div class="section"><a style="position: absolute;z-index: 1000;" href="modeller.html"><p>← Tillbaka</p></a></div>
<div class="clear"></div>
</div>
</body></html>
你应该提供一些代码，否则没人能帮你。啊，对不起。在原始帖子中添加了相关代码。您还可以访问URL并从那里查看源代码如果您提供了问题的详细信息，无论是作为这里的代码片段还是JSFIDLE中的代码片段，就可以更容易地查明错误。你能添加你所有的资产并让它工作吗？我删除了@SoorajChandran询问的代码。删除该代码后，轨迹板在Chrome中滚动工作。但是，当在鼠标上使用滚轮时，它根本不起作用。因此，该脚本似乎将垂直滚动转换为水平滚动，而Chrome似乎无法完全读取该脚本。为了让它在Chrome中工作，脚本中有什么我必须修改的吗？你应该提供一些代码，否则没有人可以帮助你。啊，对不起。在原始帖子中添加了相关代码。您还可以访问URL并从那里查看源代码如果您提供了问题的详细信息，无论是作为这里的代码片段还是JSFIDLE中的代码片段，就可以更容易地查明错误。你能添加你所有的资产并让它工作吗？我删除了@SoorajChandran询问的代码。删除该代码后，轨迹板在Chrome中滚动工作。但是，当在鼠标上使用滚轮时，它根本不起作用。因此，该脚本似乎将垂直滚动转换为水平滚动，而Chrome似乎无法完全读取该脚本。为了在Chrome中工作，脚本中有什么我必须更改的吗？
#filler { position: absolute; top: 0; left: 0; width: 18750px; height: 100%; }
#container { width: 18750px; position: absolute; top: 40%; margin-top: -150px;margin-left: 12px; }
.section {
display: block;
width: auto;
height: 500px;
max-height: 500px;
float: left;
margin-left: 20px;
}
.section img {
height: 100%;
position: relative;
}