html js 或者css怎么做到隐藏滚动条,但是依旧可以滚动?

html-css012

html js 或者css怎么做到隐藏滚动条,但是依旧可以滚动?,第1张

1、<html>

<divid="root"style="width:100%height:100%">

<divclassName="outer-container">

<divclassname="inner-container">

<divclassName="container">

</div>

</div>

</div>

</div>

2、CSS:

.outer-container{

width:100%

height:100%

overflow:hidden

}

.inner-container{

width:100%

height:100%

overflow:auto

box-sizing:content-box

padding-right:17px

}

扩展资料:

使用 overflow:hidden 隐藏滚动条,但存在的问题是页面或元素失去了滚动的特性,由于只需要兼容移动浏览器(Chrome和Safari)

应用如下CSS可以隐藏滚动条:

.element::-webkit-scrollbar{display:none}

如果要兼容PC其他浏览器(IE、Firefox等),在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了。

<marquee style="WIDTH: 388pxHEIGHT: 200px" scrollamount="2" direction="up" >

<div align="left" >

</div >

<center ><font face="黑体" color="#008000" size="4" ></font ></center >

<div align="left" >

</div >

<center >

<p ><font color="#ff6600" size="4" >滚动文字</font ></p >

<p ><font color="#ff4500" size="4" >滚动文字</font ></p >

<p ><font color="#ff3300" size="4" >滚动文字</font >

</p >

</marquee >

marquee 参数:

BGColor:滚动文本框的背景颜色。

Direction:滚动方bai向设置,可选择Left、Right、up和down。

scrolldelay:每轮滚动之间的延迟时间,越大越慢。

scrollamount:一次滚动总的时间量,数字越小滚动越慢。

Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(单次滚动)、Alternate(来回滚动)。

Align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。

Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。

Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。

loop:滚动次数。默认为infinite

hspace、vspace:前后、上下的空行。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建一个html文件,例如:index.html。

2、在index.html中的<body>标签中,输入样式代码:style="overflow-x: scroll。

3、浏览器运行index.html页面,此时html会有横线滚动条,并且隐藏了纵向滚动条。