网页不滚动的多种方式

爱吃瓜的程序猿

已于 2023-12-12 10:37:54 修改

阅读量464

点赞数 10

文章标签： javascript html css 页面滚动内容隐藏

于 2023-12-10 19:51:12 首次发布

本文链接：https://blog.csdn.net/centaury32/article/details/52881032

版权

只有内容超出我们的页面指定区域时才会出现滚动条，当内容区小于页面区域时是没有滚动条的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

当内容区的内容超出的当前页面区域的宽高时就会默认出现滚动条

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

浏览器页面禁止滚动：禁止浏览器滚动就要根据我们的需求进行处理

body {
	overflow: hidden;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
body {
	overflow: hidden;
}
</style>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <h1>我的第2个标题</h1>
    <p>我的第2个段落。</p>
    <h1>我的第3个标题</h1>
    <p>我的第3个段落。</p>
    <h1>我的第4个标题</h1>
    <p>我的第4个段落。</p>
    <h1>我的第5个标题</h1>
    <p>我的第5个段落。</p>
</body>
</html>

这样页面的滚动条就隐藏掉了，页面也不会滚动了，但也隐藏了一部分内容，甚至有可能会出现显示一半内容的情况，overflow:hidden这个属性有点类型裁剪功能

默认页面自动滚动到页面顶部

window.onscroll=function(){
  document.body.scrollTop = 0
}

爱吃瓜的程序猿

关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
网页不滚动的多种方式

让浏览器禁止滚动，内容不能超出一页屏
复制链接

扫一扫

网页不滚动的多种方式

“相关推荐”对你有帮助么？