Rumah > Artikel > hujung hadapan web > css怎样禁止页面的左右滚动条
css怎样禁止页面的左右滚动条
- WBOYasal
- 2021-12-02 16:37:526384semak imbas
在css中，可以利用“overflow-x”属性来禁止页面的左右滚动条，当该属性的值为“hidden”时，可以将超出左右边缘的元素内容隐藏起来，进而禁止页面左右滚动条的显示；语法为“body{overflow-x:hidden;}”。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css怎样禁止页面的左右滚动条
我们可以通过overflow-x属性，设置超出页面左右宽度的内容进行隐藏，这样页面就不会出现左右滚动条了。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
overflow-x:hidden;
}
</style>
</head>
<body>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</body>
</html>如果没有给body元素添加overflow-x:hidden;样式，输出结果如下：
上述示例输出结果如下：
（学习视频分享：css视频教程）
Atas ialah kandungan terperinci css怎样禁止页面的左右滚动条. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css怎么把背景图显示完全Artikel seterusnya：css怎么让照片垂直居中