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

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 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了。

1、完全隐藏

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

<boby scroll="no">

2、在不需要时隐藏

指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条;

反之,则显示;

<boby scroll="auto">

3、另一种方法

<style type="text/css">

body {

overflow-x:hidden

overflow-y:hidden

}

</style>

<style type="text/css">

html {

overflow-x:hidden

overflow-y:hidden

}

</style>

在我们使用WINDOWS的软件的时候,跨页的时候,右侧有一个条,用于翻页。

他就是滚动条:用鼠标轮控制,用键盘控制,用鼠标拖动控制等。

滚动条由滚动滑块和滚动箭头组成

实现页与页的切换。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/6217641.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-03-18
下一篇2023-03-18

发表评论

登录后才能评论

评论列表(0条)

    保存