如何删除页面上的滚动条？

Brennan Macaig 发表于 Dev

布伦南·麦凯格（Brennan Macaig）

因此，即使没有滚动显示的内容，在我的网站上（可以在此处找到），该网站也允许我向下滚动！

如果您通过查看我的站点或通过查看代码注意到，我有几个样式表，每个样式表控制一个单独的背景图像，然后控制字体和颜色。这些文件除着色外基本相同。在此示例中，我仅提供了这些文件之一。

html, body, .do-you-even-flexbox {
    height:100%;
   	width:100%;
   	overflow-x:hidden;
}body {
    margin:0;
    font:normal 14px/1.2"Roboto", Helvetica, Arial, sans-serif;
    text-align:center;
    background:#111 url('https://c4.staticflickr.com/4/3883/15331328401_f42b9bfcf5_h.jpg') center top/ cover;
} ::-moz-selection {
    background:#DFDF12;
   	color:#fff;
}::selection {
    background:#DFDF12;
    color:#fff;
}a {
    text-decoration:none;
}a:hover, a:active {
    outline:none;
 	text-decoration:underline;
}a:focus {
    outline:thin dotted;
}.do-you-even-flexbox, .container {
    position:relative;
    top:0;
    width:100%;
    height:100%;
}.container {
    padding:8px 20px 15px;
    display:flex;
    align-content:center;
}.box {
    height:20%;
   	margin:auto
}h1 {
    font-family:"Roboto Slab", Helvetica, Arial, sans-serif;
    margin:0;
    color:#fff;
    font-weight:400;
    font-size:90px;
}h2 {
    font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
    margin:0;
	color:#fff;
	font-weight:400;
	font-size:50px;
}.social {
	margin-top:30px;
}.social a {
	background-color:#F5F7FA;
	border-radius:35px;
	margin:0 3px;
	width:26px;
	height:26px;
	padding:16px;
	display:inline-block;
	-webkit-transition:background-color .6s ease;
	transition:background-color .6s ease;
}.social a:hover, .social a:focus {
	outline:none;
	background-color:#FC6E51;
}.icon {
	width:26px;
	height:26px;
}.icon>path {
	fill:#111;
}.links {
    color:#fff;
    margin-top:30px;
    font-size:20px;
}.links a {
    display:inline-block;
    padding:0 5px;
    color:#fff;
	font-size:20px;
}.links {
    color:#fff;
    font-size:20px;
}.links a:hover {
    color:#fff;
    font-size:20px;
}
@media (max-width: 660px) {
   	h1 {
        font-size:64px;
    }h2 {
        font-size:24px;
    }
}
@media (max-width: 460px) {
    .do-you-even-flexbox {
        display:none;
    }.container {
        margin:0 auto;
        margin-top:4%;
    }.links a {
        display:block;
    }h1 {
        font-size:48px;
    }
    h2 {
        font-size:16px;
    }
}
@media (max-width: 350px) {
    h1 {
        font-size:40px;
    }
}

<!DOCTYPE html>
<html>
	<head>
        <!-- Bootstrap the fonts CSS -->
        <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
        <!-- Bootstrap the custom CSS -->
       <!-- <link rel="stylesheet" href="assets/css/index.css"> -->
       <!--<script>
			function chooseStyle() {
 				var css = new Array('index', 'index_one', 'index_two','index_three', 'index_four', 'index_five');
  				var i = Math.floor(Math.random()*css.length);
  				var style = "assets/css/front/"+css[i]+".css";
  
  				return style;
			}

			document.write('<link rel="stylesheet" href="'+chooseStyle()+'" type="text/css">');
		</script>-->
		<meta name="viewport" content="width=device-width, initial-scale=1">

	</head>
	<body>
		<i class="do-you-even-flexbox"></i>
		<a href="javascript:history.go(0)"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-refresh-128.png" widt="64" height="64" alt="Refresh"></a>
		<div class="container">
			<div class="box">
				<h1>Hey There, I'm Brennan.</h1>
				<h2>This is my website, portfolio and blog.</h2>
				<div class="links">
					<a href="blog.html" title="My Blog">| Blog |</a>
					<a href="projects.html" title="My Projects">| Projects |</a>
					<a href="downloads.html" title="Download my stuff!">| Downloads |</a>
					<a href="ppages.html" title="Find dedicated pages for big projects!">| Project Pages |</a>
				</div>
			</div>
		</div>
	</body>
</html>

任何帮助都将不胜感激！

谢谢！

亚历克斯·查尔

简单添加overflow-y: hidden;主体：

body {
    margin: 0;
    font: normal 14px/1.2"Roboto", Helvetica, Arial, sans-serif;
    text-align: center;
    background: #111 url('http://i.imgur.com/TX6Uk7p.jpg') center top/ cover;
    overflow-y: hidden;/*add this*/
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。