我有这个网站：链接
我遇到的问题是，在移动设备上，身体右侧有这个不寻常的空白：
该网站由一个页面组成，其中包含多个部分，导航图标用于平滑向下滚动页面。
为了尝试解决这个问题，我使用了推荐的：body{ overflow-x:hidden; }这解决了这个问题，但这会阻止我的滚动系统由于某种原因而无法工作。
有没有办法让这个网站在body{ overflow-x:hidden; }不使用它的情况下进行模仿，即使使用 jquery 也是如此？
这是代码：
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=768; initial-scale=1.0;" />
<title>Georgia Elliott Illustration</title>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="js/twitter/jquery.tweet.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="http://1.gravatar.com/blavatar/f541b2d0f8b48c05e56c0daa078f3ed9?s=16" sizes="16x16" />
<link rel="icon" type="image/x-icon" href="http://1.gravatar.com/blavatar/f541b2d0f8b48c05e56c0daa078f3ed9?s=16" sizes="16x16" />
<link rel="apple-touch-icon-precomposed" href="http://1.gravatar.com/blavatar/94661061bf2aad5cdce6115262923c20?s=114" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/page.js"></script>
<script type="text/javascript" src="js/smooth.js"></script>
<script type="text/javascript" src="js/twitter/jquery.tweet.js"></script>
<script type='text/javascript'>
jQuery(function($){
$("#twitter-feed-main").tweet({
username: "creative_exp",
join_text: "auto",
avatar_size: 32,
count: 3,
auto_join_text_default: "We said:",
auto_join_text_ed: "We:",
auto_join_text_ing: "We were:",
auto_join_text_reply: "We replied to:",
auto_join_text_url: "We were checking out:",
loading_text: "Loading Tweets..."
});
});
</script>
</head>
<body>
<div id="splat"></div>
<div id="logo">
<a href="#home"></a>
</div>
<div id="header">
<div id="nav" class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div id="whole">
<div class="content">
<div id="home-page" class="page">
<div class="page-back"></div>
<a id="home"></a>
<div class="inner-page">
<h1>Welcome</h1>
<div class="indent">
</div>
</div>
</div><!--END home-page-->
<div id="page1" class="page">
<div class="page-back"></div>
<a id="about"></a>
<div class="inner-page">
<h1>About Me</h1>
<div class="indent">
About page content goes here.
</div>
</div>
</div><!--END page1-->
<div id="page2" class="page">
<div class="page-back"></div>
<a id="portfolio"></a>
<div class="inner-page">
<h1>Portfolio</h1>
<div class="indent">
Portfolio page content goes here.
<div id="portfolio-items">
<ul id="port-ul1">
<li id="port-item1">Test</li>
</ul>
<ul id="port-ul2">
<li id="port-item2">Test 2</li>
</ul>
<ul id="port-ul2">
<li id="port-item3">Test 3</li>
</ul>
</div>
</div>
</div>
</div><!--END page2-->
<div id="page3" class="page">
<div class="page-back"></div>
<a id="contact"></a>
<div class="inner-page">
<h1>Contact Me</h1>
<div class="indent">
Contact page content goes here.
</div>
</div>
</div><!--END page3-->
<div id="terms-page-ie" class="page">
<div class="page-back"></div>
<a id="terms-ie"></a>
<div id="cross-terms-ie" class="cross-terms-ie">X</div>
<div class="inner-page">
<h1>Terms</h1>
<div class="indent">
<h5>INTRODUCTION</h5>
<p>These terms and conditions govern your use of our website; by using our website, you accept these terms and conditions in full. If you disagree with these terms and conditions or any part of these terms and conditions, you must not use our website. You must be at least 13 years of age to use our website. By using our website you warrant and represent that you are at least 13 years of age.</p>
<h5>LICENCE TO USE WEBSITE</h5>
<p>Unless otherwise stated, we or our licensors own the intellectual property rights in the website and material on the website. Subject to the licence below, all these intellectual property rights are reserved. You may view, download for caching purposes only, and print pages or other content from the website for your own personal use, subject to the restrictions set out below and elsewhere in these terms and conditions. <br><br>
You must not:<br>
(a) republish material from this website (including republication on another website);<br>
(b) sell, rent or sub-license material from the website;<br>
(c) show any material from the website in public;<br>
(d) reproduce, duplicate, copy or otherwise exploit material on our website for a commercial purpose;<br>
(e) edit or otherwise modify any material on the website; or<br>
(f) redistribute material from this website except for content specifically and expressly made available for redistribution.</p>
<h5>ACCEPTABLE USE</h5>
<p>You must not use our website in any way that causes, or may cause, damage to the website or impairment of the availability or accessibility of the website; or in any way which is unlawful, illegal, fraudulent or harmful, or in connection with any unlawful, illegal, fraudulent or harmful purpose or activity.
You must not use our website to copy, store, host, transmit, send, use, publish or distribute any material which consists of (or is linked to) any spyware, computer virus, Trojan horse, worm, keystroke logger, rootkit or other malicious computer software.
You must not conduct any systematic or automated data collection activities (including without limitation scraping, data mining, data extraction and data harvesting) on or in relation to our website without our express written consent.
You must not use our website to transmit or send unsolicited commercial communications. You must not use our website for any purposes related to marketing without our express written consent.</p>
<h5>RESTRICTED ACCESS</h5>
<p>Access to certain areas of our website is restricted. We reserve the right to restrict access to other areas of our website, or indeed our whole website, at our discretion. If we provide you with a user ID and password to enable you to access restricted areas of our website or other content or services, you must ensure that that user ID and password is kept confidential. We may disable your user ID and password in our sole discretion without notice or explanation.</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="share" class="pull_right">
<ul>
<a href="https://www.facebook.com/georgia.e.elliott" target="_new"><li class="pull_left"><span>Facebook</span></li></a>
<a href="javascript:void(0);" id="twitter"><li class="pull_left"><span>Twitter</span></li></a>
<a href="http://georgiaelishaillustrator.wordpress.com/" target="_new"><li class="pull_left"><span>Blog</span></li></a>
</ul>
</div>
<div id="footertext"> © 2012 Georgia Elliott | All rights reserved. | Site By: <a href="http://dandd.dpwebdev.co.uk" target="_new">D&D Creative</a> | <a href="javascript:void(0);" id="terms-link">Terms</a><img src="img/ajax-loader.gif" class="ie-loader" style="vertical-align:middle;" /><img src="img/footer.png" id="ge-il-btm" style="vertical-align: middle; position: absolute; left: 0; right: 0; margin: 0 auto;" /></div>
</div>
<div id="terms-container">
<div id="terms">
<div id="cross-terms" class="cross">X</div>
<div class="inner-content">
<h3>Terms and Conditions</h3>
<div class="indent" style="overflow:auto; height:300px;">
<h5>INTRODUCTION</h5>
<p>These terms and conditions govern your use of our website; by using our website, you accept these terms and conditions in full. If you disagree with these terms and conditions or any part of these terms and conditions, you must not use our website. You must be at least 13 years of age to use our website. By using our website you warrant and represent that you are at least 13 years of age.</p>
<h5>LICENCE TO USE WEBSITE</h5>
<p>Unless otherwise stated, we or our licensors own the intellectual property rights in the website and material on the website. Subject to the licence below, all these intellectual property rights are reserved. You may view, download for caching purposes only, and print pages or other content from the website for your own personal use, subject to the restrictions set out below and elsewhere in these terms and conditions. <br><br>
You must not:<br>
(a) republish material from this website (including republication on another website);<br>
(b) sell, rent or sub-license material from the website;<br>
(c) show any material from the website in public;<br>
(d) reproduce, duplicate, copy or otherwise exploit material on our website for a commercial purpose;<br>
(e) edit or otherwise modify any material on the website; or<br>
(f) redistribute material from this website except for content specifically and expressly made available for redistribution.</p>
<h5>ACCEPTABLE USE</h5>
<p>You must not use our website in any way that causes, or may cause, damage to the website or impairment of the availability or accessibility of the website; or in any way which is unlawful, illegal, fraudulent or harmful, or in connection with any unlawful, illegal, fraudulent or harmful purpose or activity.
You must not use our website to copy, store, host, transmit, send, use, publish or distribute any material which consists of (or is linked to) any spyware, computer virus, Trojan horse, worm, keystroke logger, rootkit or other malicious computer software.
You must not conduct any systematic or automated data collection activities (including without limitation scraping, data mining, data extraction and data harvesting) on or in relation to our website without our express written consent.
You must not use our website to transmit or send unsolicited commercial communications. You must not use our website for any purposes related to marketing without our express written consent.</p>
<h5>RESTRICTED ACCESS</h5>
<p>Access to certain areas of our website is restricted. We reserve the right to restrict access to other areas of our website, or indeed our whole website, at our discretion. If we provide you with a user ID and password to enable you to access restricted areas of our website or other content or services, you must ensure that that user ID and password is kept confidential. We may disable your user ID and password in our sole discretion without notice or explanation.</p>
</div>
</div>
</div>
</div>
<div id="overlay"></div>
<div id="twitter-feed-container">
<div id="twitter-feed-cross">X</div>
<div id="twitter-arrow"></div>
<div id="twitter-feed-main">
</div>
<a href="" id="see-twitter" target="_new" >See More...</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#terms-link").click(function() {
$('#terms-page-ie').show();
$('#terms-link').hide();
$('.ie-loader').show();
var $targetId = $('#terms-page-ie'), $targetAnchor = $('[name=#terms-page-ie]');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1500);
}
$('.ie-loader').fadeOut(2500);
});
$("#cross-terms-ie").click(function() {
$('#terms-page-ie').hide();
$('#terms-link').show();
$('html, body').animate({scrollTop: 0}, 1000);
});
$("#twitter").click(function() {
$('#twitter-feed-container').fadeToggle(800);
});
$("#twitter-feed-cross").click(function() {
$('#twitter-feed-container').fadeOut(800);
});
$
});
</script>
</body>
</html>
CSS：
/* CSS Document */
/* FONTS */
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.ttf');
}
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.eot');
}
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.svg');
}
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.woff');
}
* {
margin:0;
font-family:'PT Sans';
}
html, body {
height:100%;
width:100%;
}
html {
overflow-y: auto;
overflow-x: hidden;
}
.content {
height:100%;
}
a {
color:#6CF;
}
a:hover {
color:#69F;
}
a:active {
color:#C06;
}
/* LOGO */
#logo {
top:0;
left:20px;
z-index:1000;
position:fixed;
background-image:url(../img/logo-new-front.png);
background-repeat:no-repeat;
background-color:transparent;
width:400px;
height:400px;
}
#splat {
top:0;
left:20px;
z-index:1000;
position:fixed;
background-image:url(../img/logo-new.png);
background-repeat:no-repeat;
background-color:transparent;
width:400px;
height:400px;
}
/* HEADER STYLES */
#header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #000000;
color:#FFFFFF;
height: 40px;
padding-top: 1px;
line-height:32px;
font-size:12px;
padding-left:8px;
}
/* NAV STYLES */
.nav {
position: fixed;
right: 0;
width: 400px;
height: 40px;
line-height: 36px;
}
#nav ul {
width: 435px;
height: 40px;
padding-left: 0px;
}
#nav li {
float:left;
margin:0 30px;
list-style:none;
}
#nav li a {
color:#FFF;
text-decoration:none;
border-bottom:dotted 1px #FFF;
}
#nav li a:hover {
color:#69F;
text-decoration:none;
border-bottom:dotted 1px #6CF;
}
#nav li a:active {
color:#C06;
text-decoration:none;
border-bottom:dotted 1px #6CF;
}
/* PAGE STYLES */
.page {
width:100%;
}
.inner-page {
max-width: 880px;
min-width: 680px;
margin: 0 auto 0 430px;
padding: 70px 0 48px 0;
}
.page-texture {
background-image:url(../img/overlay-pattern.png);
background-color:transparent;
background-repeat:repeat;
position: fixed;
width: 100%;
height: 100%;
top:0;
left:0;
}
#home-page {
color:#000000;
background:#FFF url(../img/overlay-pattern.png);
height:1000px;
}
#page1 {
background:#CCC url(../img/overlay-pattern.png);
height:1200px;
color:#000000;
}
#page2 {
background:#999 url(../img/overlay-pattern.png);
height:2000px;
}
#page3 {
background:#666 url(../img/overlay-pattern.png);
height:780px;
}
#terms-page-ie {
display:none;
background:#333 url(../img/overlay-pattern.png);
color:#FFFFFF;
}
.inner-content {
padding:20px;
}
.indent {
margin-left:20px;
margin-top:8px;
}
.hidden-overflow {
overflow:hidden;
}
.cross {
right:5px;
top:2px;
position:absolute;
font-family:"Raleway";
font-size:16px;
cursor:pointer;
}
.cross-terms-ie {
font-family:"PT Sans";
font-size:16px;
cursor:pointer;
position:absolute;
right:5px;
margin-top:42px;
}
img.ie-loader {
display:none;
}
#terms-container {
display:none;
position:fixed;
width:100%;
height:100%;
margin:auto;
top:0;
left:0;
}
#terms {
position:absolute;
width:700px;
height:400px;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
background:#000000;
color:#FFFFFF;
z-index:100;
}
#overlay {
display:none;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background-color:#000000;
opacity:0.4;
filter:alpha(opacity=40);
}
/* FOOTER STYLES */
#footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #000000;
color:#FFFFFF;
height: 40px;
padding-top: 1px;
line-height:40px;
font-size:12px;
padding-left:8px;
z-index:1000;
}
#footertext a {
text-decoration:none;
border-bottom:1px dotted #ffffff;
color:#ffffff;
}
@media (max-width: 1230px) {
#ge-il-btm {
display:none;
}
}
#share {
margin-right:8px;
}
#share li {
list-style:none;
padding:0 8px;
}
#share li:hover {
background:#6CF;
color:#000000;
}
#share a li {
text-decoration:none;
color:#FFFFFF;
}
/* PORTFOLIO STYLES */
#portfolio-items ul {
background: black;
border: 1px #6CF solid;
list-style-image: url(../img/bullet.png);
color: #6CF;
width: 400px;
cursor: pointer;
height: 20px;
margin: 10px 0 0 0;
padding: 10px 30px 10px 30px;
}
/* FLOAT STYLES */
.pull_left {
float:left;
}
.pull_right {
float:right;
}
/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
display:block;
font-weight:normal;
}
h1 { font-size:48px; font-family:"Raleway"; margin-bottom:30px; }
h2 { font-size:42px; font-family:"Raleway"; }
h3 { font-size:36px; font-family:'Lato'; }
h4 { font-size:30px; font-family:'Lato'; }
h5 { font-size:24px; font-family:'Lato'; }
h6 { font-size:18px; font-family:'Lato'; }
#terms-page-ie h5 {
border-bottom: 1px dotted #FFFFFF;
margin: 0px 0px 10px 0px;
}
#terms-page-ie p {
margin: 0 0 25px 0;
}
.shadow {
text-shadow:-1px 1px 3px #000000;
}
/* LOADING SCRREN */
span {
display: block;
margin: 0 auto;
}
span[class*="l-"] {
height: 8px; width: 8px;
background: #6CF;
display: inline-block;
margin: 12px 2px;
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
-ms-animation: loader 4s infinite;
-ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-ms-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;
}
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px);opacity: 0;}
25% {opacity: 1;}
50% {-webkit-transform: translateX(30px);opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px);opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px);opacity: 0;}
100% {opacity: 0;}
}
@-keyframes loader {
0% {-transform: translateX(-30px);opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px);opacity: 0;}
100% {opacity: 0;}
}
@-ms-keyframes loader {
0% {-ms-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-ms-transform: translateX(30px);opacity: 1;}
100% {opacity: 0;}
}
/* TWITTER FEED */
#twitter-feed-container{
width: 300px;
position: fixed;
bottom: 49px;
right: 25px;
height: 340px;
background: #000000;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
display: none;
color:#CCCCCC;
font-size:13px;
}
#twitter-feed-container a{
color:#CCCCCC;
}
#twitter-feed-container a.tweet_avatar{
border-bottom:none !important;
}
.tweet_list li {
margin-bottom:4px;
padding: 0.5em 0.5em 12px 0.5em !important;
}
#twitter-arrow {
width:0;
height:0;
right: 30px;
bottom: -16px;
position:absolute;
border: .65em solid;
border-color: #000000 transparent transparent transparent;
}
#twitter-feed-main {
height: 305px;
overflow: hidden;
position: absolute;
bottom: 30px;
right: 8px;
width: 285px;
}
#twitter-feed-cross {
font-family: "PT Sans";
font-size: 16px;
cursor: pointer;
float: right;
right: 10px;
top: 8px;
z-index: 10000;
position: absolute;
}
#twitter-logo {
background: url(../img/social/doodles.png) -9px -10px;
height: 70px;
width: 70px;
position:absolute;
}
a#see-twitter {
position:absolute;
bottom:5px;
right:8px;
}
JS平滑滚动
$(document).ready(function() {
$('html, body').animate({scrollTop: 0}, 1000);
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 1500);
return false;
});
}
}
});
});