css隐藏滚动条样式（html js 或者css怎么做到隐藏滚动条，但是依旧可以滚动）

本文目录

• html js 或者css怎么做到隐藏滚动条，但是依旧可以滚动
• CSS 禁止滚动条（隐藏或屏蔽IE滚动条的几种常用方法）
• overflow-y: hidden 隐藏了上下滚动条以后鼠标滚球无法滚动
• DIV怎么设置滚动条
• css如何实现隐藏滚动条
• 怎么用css控制滚动条 只 显示右边的 不显示下边的滚动条
• css设置滚动条样式不生效
• css自定义滚动条
• html js 或者css怎么做到隐藏滚动条，但是依旧可以滚动
• 怎么用CSS给html加横向滚动条并且隐藏竖向滚动条

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

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

CSS 禁止滚动条（隐藏或屏蔽IE滚动条的几种常用方法）

CSS 禁止滚动条，有4种方法，具体如下：

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》
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》

overflow-y: hidden 隐藏了上下滚动条以后鼠标滚球无法滚动

是的，当使用 CSS 属性 overflow-y: hidden; 来隐藏元素的上下滚动条时，将会禁用鼠标滚轮滚动功能。
这是因为滚动条被隐藏后，浏览器无法检测到用户的滚轮事件，因此无法触发滚动操作。如果你需要隐藏滚动条但仍需要支持滚动操作，你可以尝试使用 JavaScript 或其他库来模拟滚动条或使用自定义的滚动条。
下面是一个例子，使用 JavaScript 实现一个自定义滚动条来隐藏原生的滚动条：
html：
《div class="scroll-container"》
《div class="scroll-content"》
《!-- content here --》
《/div》《/div》
css：
.scroll-container { overflow-y: hidden; position: relative;
}.scroll-content { height: 100%; overflow-y: scroll;
}/* Custom scrollbar styles */.scroll-container::-webkit-scrollbar { width: 6px;
}.scroll-container::-webkit-scrollbar-track { background-color: #F5F5F5;
}.scroll-container::-webkit-scrollbar-thumb { background-color: #000000; border-radius: 10px;
}
javascriptCopy code// 使用 JavaScript 模拟自定义滚动条const container = document.querySelector(’.scroll-container’);const content = document.querySelector(’.scroll-content’);const scrollbar = document.createElement(’div’);
scrollbar.classList.add(’scrollbar’);const thumb = document.createElement(’div’);
thumb.classList.add(’thumb’);
scrollbar.appendChild(thumb);
container.appendChild(scrollbar);// 更新自定义滚动条的高度function updateScrollbar() { const contentHeight = content.scrollHeight; const containerHeight = container.offsetHeight; const scrollbarHeight = containerHeight / contentHeight * containerHeight;
thumb.style.height = scrollbarHeight + ’px’;
}// 监听内容变化并更新自定义滚动条高度content.addEventListener(’DOMSubtreeModified’, updateScrollbar);// 监听滚动事件并更新自定义滚动条位置content.addEventListener(’scroll’, () =》 { const contentHeight = content.scrollHeight; const containerHeight = container.offsetHeight; const scrollTop = content.scrollTop; const scrollbarHeight = containerHeight / contentHeight * containerHeight; const thumbTop = scrollTop / contentHeight * containerHeight;
thumb.style.top = thumbTop + ’px’;
});// 初始化自定义滚动条updateScrollbar();
上面的代码演示了如何使用 JavaScript 来模拟自定义滚动条。你可以根据你的需求来自定义样式和滚动条功能

DIV怎么设置滚动条

在实际操作过程中我们知道，很多DIV都是不够显示全部的内容，那么一定就要设置滚动条，今天就来教大家DIV的滚动条设置。
对div设置滚动条，设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏，接下来为大家介绍。
一、CSS基础认识 - TOP
overflow-y:scroll; 总是显示纵向滚动条
overflow-y:visible : 不剪切内容也不添加纵向滚动条
***隐藏网址***
overflow-x:scroll; 总是显示横向滚动条
overflow-x:visible : 不剪切内容也不添加横向滚动条
***隐藏网址***
了解css overflow
二、div设置滚动条实例
DIVCSS5通过对第一个DIV对象设置div宽度、div高度、div边框样式，并在DIV盒子里添加演示文字内容，第二个盒子设置相同的CSS样式，盒子文字内容相同，并设置横向和纵向滚动条，观察效果。
第一个盒子CSS命名为“divcs5-a”,第二个DIV盒子样式选择器命名为“divcss5-b”。
1、具体完整html源代码如下：
《!DOCTYPE html》
《html》
《head》
《meta charset="gb2312" /》
《title》div滚动条 在线演示 www.divcss5.com《/title》
《style》
.divcss5-a,.divcss5-b{ width:150px; height:100px; float:left; border:1px solid #F00}
.divcss5-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;}
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */
《/style》
《/head》
《body》
《div class="divcss5-a"》哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊《/div》

《div class="divcss5-b"》哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊《/div》
《/body》
《/html》为了观察效果我们对两个DIV盒子都设置基础相同的CSS样式和相同的文字内容。对“.divcss5-b”设置了X和y（横向和纵向的滚动条样式。）
第一个盒子“.divcss5-a”内容过多而溢出了DIV盒子，第二个盒子设置了滚动条样式，所以没有溢出，纵向右侧（Y）出现了可下拉上拉滚动条样式，横
如何隐藏CSS div滚动条
DIV默认是没有滚动条的，如果加了滚动条样式，去掉后滚动条自然就会消失。如果是框架iframe出现的滚动条，如果要想X横向隐藏滚动条，只需要设置overflow-x:visible或overflow-x:hidden；如果想iframe出现Y纵向滚动条隐藏可以设置CSS样式overflow-y:visible或overflow-y:hidden即可隐藏滚动条。
相关阅读：
css波纹动画
在HTML中插入空格的几种方法
添加或删除 HTML dom元素

css如何实现隐藏滚动条

移动端
移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。
.container::-webkit-scrollbar {
display: none;
}（推荐教程：CSS教程）
PC 端
PC 端对兼容性的要求相对来说要高一点，所有可以换一种方法，大致思路就是在内容div外面包一个父容器div，设置 overflow: hidden，内容div设置 display-x: hidden; display-y: auto; 最后设置父容器div的宽度小于内容div的宽度或者设置内容div的 margin-right 为负值就可以了。
《div class="outer"》
《div class="content"》
《p》1111《/p》
《p》222《/p》
《p》333《/p》
《p》444《/p》
《/div》
《/div》
.outer {
width: 300px;
height: 300px;
overflow: hidden;

.content {
width: 330px;
/*margin-right: -15px;*/
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background: red;
padding-top: 100px;

p:not(:first-child) {
margin-top: 100px;
}
}
}相关视频教程推荐：css视频教程

怎么用css控制滚动条 只 显示右边的 不显示下边的滚动条

1、首先让我们创建一个HTML文件。

2、通过记事本来，书写上一个HTML的整体结构。

3、书写一个div模块。

4、接着开始写css代码。

5、定义上div的长宽。

6、利用overflow属性，来设置是否展示滚动栏。

7、打开HTML网页，就已经可以看到右边滚动栏了。

css设置滚动条样式不生效

1、首先打开前端开发工具，新建一个HTML代码页面，如下图所示。

2、在html代码页面上创建一个父《div》和一个子《div》，同时给这两个div添加一个class分别为scroll-box、scroll。

3、给子《div》添加内容，为了让滚动条可以实现，尽量多添加一些内容。

4、设置scroll-box、scroll类样式。给scroll-box设置一个高度和内容超出后隐藏的样式，给scroll设置内容超出后显示滚动条、高度为100%、宽=100%+滚动条的宽

5、最后保存html代码，然后使用浏览器打开，这个时候会发现滚动条已经不显示出来，但是页面内容依然可以滚动。

css自定义滚动条

1、css可以通过为网页元素设置滚动条样式使网页元素的内容实现滚动。

2、第一种方法，代码如图。高度必须要有，overflow属性为auto。如果要出现水平滚动条，overflow-x：auto，如果出现垂直滚动条为，overflow-y：auto。然后查看结果，如图所示。第二种方法，如图。也需要设置宽高。

3、首先，打开html器，新建一个html文件，例如：index.html。在index.html中的标签中，输入样式代码：style=overflow-x：scroll；。浏览器运行index.html页面，此时html会有横线滚动条，并且隐藏了纵向滚动条。

4、CSS无法控制滚动条的样式。这里推荐几块滚动条美化的插件给你。Windows：全屏窗口滚动插件该插件可以很好地实现全屏滚动，每滚动一次即为一屏。

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

一、文字溢出，就让文字自动换行，代码如下：

二、隐藏内层DIV的宽度

扩展资料：

overflow这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

怎么用CSS给html加横向滚动条并且隐藏竖向滚动条

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

1、首先，打开html器，新建一个html文件，例如：index.html。

2、在index.html中的《body》标签中，输入样式代码：style="overflow-x: scroll; 。

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