标准下如何隐藏页面的滚动条

最新推荐文章于 2022-12-21 17:52:04 发布
最新推荐文章于 2022-12-21 17:52:04 发布
阅读量64 收藏
点赞数
原文链接：http://www.cnblogs.com/kelly/archive/2008/09/10/1288418.html
版权

本来的话，在CSS中定义body{overflow-x:hidden}就隐藏掉滚动条

当使用!DOCTYPE声明打开符合标准的模式时，overflow、overflow-x和overflow-y属性会应用于HTML元素，应用于BODY元素时无效。


所以要在CSS中定义：html{overflow-x:hidden}，问题解决

原文地址 http://www.backley.net/article.asp?id=275

转载于:https://www.cnblogs.com/kelly/archive/2008/09/10/1288418.html

weixin_30698297
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS隐藏元素滚动条的示例代码
11-21
在CSS中，隐藏元素滚动条是一项常见的需求，特别是在设计页面布局时，可能希望保持界面的简洁性。然而，隐藏滚动条并不意味着要牺牲内容的可滚动性。在不同的浏览器中，实现这一目标的方法略有不同。以下是一些关于...
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
09-05
网页滚动条的样式和行为是用户体验中的一个重要细节，它可以影响用户对网站的感知和互动。在本文中，我们将深入探讨如何实现滚动条变色、隐藏滚动条以及双击网页自动滚屏显示的功能。 首先，滚动条变色是通过CSS...
IE、Chrome、Firefox浏览器隐藏滚动条（IE、火狐、谷歌浏览器）
weixin_46022934的博客
12-21 7539
一、背景和效果图如下： 1.背景 2.设置属性前效果图： 2.设置后效果图： 二、直接通过CSS修改样式，保存滑动功能 1.全局设置滚动条如下（谷歌Chrome） Css代码如下 效果图如下 2.给某一个元素设置如下（谷歌Chrome） Css代码如下 效果图如下 三、这里其他浏览器的方法 1.IE去除滚动条样式（IE10以上内核） 2.火狐除滚动条样式（Gecko 内核） 总结
怎么在overflow-y:sroll的情况下 隐藏滚动条
weixin_30687051的博客
07-10 2683
当我们的内容超出了我们的div，往往会出现滚动条，影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。 这里介绍一个简单的方法。 大体思路是在div外面再套一个div。这个div设置overflow:hidden。 而内容div设置 overflow-y: scroll;over...
隐藏网页的滚动条的方法
冷夜轩的博客
06-28 1万+
解决思路： 在上个问题中我们希望是强制出现滚动条，但有时候我们并不希望出现滚动条，那就要隐藏它了。从上个问题的指点中我们很容易得到答案----设置CSS属性overflow的值为hidden。 具体步骤： 方法一：设置CSS属性overflow为hidden。 方法二：设置body元素的scroll属性为no。 没有水平滚动条    没有垂直
css-隐藏网页页面右侧滚动条
感谢遇到的每一个人的博客
08-28 1万+
逻辑：三个DIV，大“div” 设置一个高度、超出高度内容隐藏，小“div”设置一个高度可以和大“div”高度一样，中“div”设置超出大“div”内容xian显示滑动条，并且添加 “隐藏滚轮”样式； 原理：就是小盒子和大盒子高度都写固定了，但是小盒子内容很多超过大盒子，但是大盒子 overflow：hidden 隐藏了，只要给中盒子添加 超出部分显示滚动条就好了，然后中盒子使用 “隐藏滚轮”样...
如何去除页面滚动条
qq_34893326的博客
11-29 3万+
<body scroll=no> 去掉水平滚动条： <body style="overflow-x: hidden"> 去掉竖直滚动条： <body style="overflow-y: hidden"> 隐藏横向滚动条，显示纵向滚动条: <body style="overflow-x:hidden;overflow-y:scroll"> 全部...
css设置滚动条颜色与样式以及如何去掉与隐藏滚动条
09-22
总的来说，CSS提供了一种灵活的方式，让我们可以对网页的滚动条进行自定义，使其与页面设计风格保持一致，或者在不需要时隐藏它们。不过，需要注意的是，这些样式可能在不同的浏览器中表现不一，因此在实际应用时，...
iframe的滚动条问题：显示隐藏滚动条.doc
08-22
解决这个问题可以通过多种方法，包括在iFrame标签中添加滚动条样式、使用CSS样式来控制滚动条的显示或隐藏、在iFrame的父页面和子页面中添加DOCTYPE声明等。 在使用iFrame时，滚动条的显示或隐藏问题是很常见的。...
firefox下有滚动条时页面抖动问题的解决方法
09-25
在Firefox浏览器中，当网页内容超出单页显示范围时，滚动条通常会自动出现，而如果页面中的某些元素，如tooltip或动态加载的内容，能够临时改变页面高度，就可能导致滚动条时隐时现，从而引发一种名为“页面抖动”的...
页面隐藏滚动条
想成为大神的小白
03-08 207
直接搞： HTML: &lt;div class="outer-container"&gt; &lt;div class="inner-container"&gt; ...... &lt;/div&gt; &lt;/div&gt; CSS: .outer-container{ width: 360px; height: 200px; position: ...
页面的左侧菜单如何隐藏滚动条！！！！！
qq_37306041的博客
07-09 2630
直接上代码：&lt;div id="leftMainMenu" style="width:180px;z-index:999; overflow-x:hidden; position:fixed;"&gt; &lt;div id="UILoader_navBar" style="overflow-x:hidden;width:200px;"&gt; &lt;
CSS3自定义滚动条样式 ::webkit-scrollbar
又是再见?
11-07 2万+
windows 下默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条， 故回头翻了一下CSS3， 还真能不用插件实现自定义滚动条的样式，正合我意 代码如下： /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color:
隐藏页面滚动条，但还有滚动效果
涛涛小子的博客
07-05 1473
给页面添加样式：::-webkit-scrollbar{    display:none;}
如何去除页面的滚动条并且还可以用滚轮滚动页面？
qq_36082908的博客
12-28 8141
最近在开发网页的时候遇到了这么一个尴尬的事情，当我把滚动条去掉之后，页面无法滚动了，使用滚轮也不行。那么怎么才能既隐藏滚动条，又可以用滚轮滚动页面呢？ 下面提供两种解决方案。第一种是只在Chorm浏览器上有效的，第二种是在IE、FireFox、Chorm上面都有效的。。（当然还是选择的第二种啦） 第一种代码如下： html { -ms-overflow-style:none
CSS3自定义滚动条样式 -webkit-scrollbar
热门推荐
韩世雷 程序员专栏
10-23 30万+
有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？ 前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 演示
微信小程序 - 页面隐藏滚动条
idomyway的博客
12-08 1234
// 滚动条隐藏 ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
使用CSS隐藏元素滚动条
weixin_45977625的博客
10-28 1107
如何隐藏滚动条，同时仍然可以在任何元素上滚动？ 首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置overflow：auto样式即可。想要完全隐藏滚动条只需设置overflow：hidden即可，但是这样一来将导致元素内容不可滚动。时至今日，还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容，只能通过针对特定浏览器设置滚动条样式来实现。 Chrome和Safari浏览器 对于Chrome和Safari浏览器，我们必须使用CSS滚动条选择器，然后使用display：none隐藏它
页面出现两个滚动条如何隐藏其中一个，并依然可以滚动
Lotus的博客
04-23 8402
问题描述： 我在页面上有一个弹框，想要弹框滚动，背景页面不动。 解决方法： .alert-box{ position: fixed; overflow-y: scroll; width: 100%; height: 100%; top: 0; left: 0; &::-webkit-scrollbar{ display: none; } }...
css隐藏滚动条的方法
最新发布
07-27
隐藏滚动条的方法有多种。一种方法是在`<body>`标签中添加样式`style="overflow-x:hidden"`来隐藏水平滚动条，或者添加样式`style="overflow-y:hidden"`来隐藏垂直滚动条。另一种方法是在被包含页面中添加样式`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值