css隐藏滚动条方法

1、完全隐藏

在<boby>里加入scroll="no",可隐藏滚动条;
<boby scroll="no">

2、在不需要时隐藏

指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条;反之,则显示;
<boby scroll="auto">

3、样式表方法

在<boby>里加入style="overflow-x:hidden",可隐藏水平滚动条;加入style="overflow-y:hidden",可隐藏垂直滚动条。

被包含页面里加入
<style>
html { overflow-x:hidden; }
< /style>

有一段解释是这样说的:body{ overflow-x:hidden; }在标准 DTD 下是不可以的

4、另一种方法
<style
type="text/css">
body {
overflow-x:hidden;
overflow-y:hidden;

}
< /style> 

< style type="text/css">
html {

overflow-x:hidden;
overflow-y:hidden;
}

< /style>

时间: 2024-08-11 03:33:10

css隐藏滚动条方法的相关文章

css隐藏滚动条

xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.对于这个bug一般有3种解决方案,方法1: 代码如下: html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条优点:完全解决了这个问题, 允许你保持完整的XHTML doctype.缺点:即使页面不需要垂直滚

CSS隐藏内容方法

在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等等. 使用CSS即可使以上提到的内容隐藏起来,几种隐藏内容的方法: 1.使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示,如代码.文字.链接.图片.div层,是推荐的内容隐藏方式. <div style="display:none;">我不占地儿,你看不见我:</div>

css 隐藏滚动条

/* component: node-list */ .node-list { width: 12.5%; max-height: 100%; /* 隐藏滚动条 */ overflow-x: hidden; /* background-color: tomato; */ } .node-list::-webkit-scrollbar { display: none; } 原文地址:https://www.cnblogs.com/aisowe/p/11441937.html

浏览器css隐藏滚动条的方法!除了IE一般都支持

::-webkit-scrollbar { /* 滚动条整体部分 */ width:0px; margin-right:2px}::-webkit-scrollbar-track-piece { /*内层轨道,滚动条中间部分 */ background-color: white;} ::-webkit-scrollbar:horizontal { height:0px; margin-bottom:2px} ::-webkit-scrollbar-track-piece { /*内层轨道,滚动条

css隐藏滚动条(webkit和非webkit)

1.移动端或者谷歌浏览器(webkit内核) ::-webkit-scrollbar { display: none; } 2.兼容所有浏览器的css写法 demo: html部分: <div class="outsideBox"> <div class="centerBox"> <div class="insideBox"></div> </div> </div> CSS部

微信小程序scroll-view隐藏滚动条方法

不管是移动还是小程序我们在开发的时候总会遇到滚动条的问题,今天我也遇到了,加入以下代码即可解决. 在你当前文件的在wxss里加入以下代码: ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; } 原文地址:https://www.cnblogs.com/xuwen777/p/11703561.html

纯CSS隐藏滚动条

::-webkit-scrollbar {width: 0px;height: 1px;}::-webkit-scrollbar-thumb {border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: rgba(0, 0, 0, 0.2);} 直接复制即可 原文地址:https://www.cnblogs.com/fushengfuge/p/9077513.html

关于CSS中隐藏内容方法的思考

正在读<精通CSS>,很多样式需要用到内容隐藏,比如平时无内容,鼠标悬停时显示出内容.书中常用的方法是用text-indent:-1000em.margin-left:-1000em将元素隐藏到屏幕边缘之外,而display:none和visibility:hidden.overflow:hidden也可以做到隐藏,那么这几种用法有哪些利弊呢? 1.display:none; 搜索引擎可能认为被隐藏的元素属于垃圾信息而忽略,不利于SEO:屏幕阅读器会忽略被隐藏的元素. 2.visibility

隐藏滚动条

3种方法实现CSS隐藏滚动条并可以滚动内容 2018-03-17539View0 隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1:计算滚动条宽度并隐藏起来 在本站的侧栏,你可以看到前端日报的那块内容并没有滚动条,但鼠标移上去却可以滚动内容.这是什么技术呢? 其实我只是把滚动条通过定位把它隐藏了起来. 演示 下面给一个简化版的代码 1 <div c