去除页面滚动条效果

已于 2022-04-03 14:30:07 修改
阅读量1.2k 收藏
点赞数 1
分类专栏： css
于 2022-03-05 16:31:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nbsl_/article/details/123296881
版权

CSS 滚动条 隐藏 Webkit 浏览器
关键词由CSDN通过智能技术生成

去除页面滚动条

实现代码

body::-webkit-scrollbar {display: none;}
爱编程的梨清
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2 - 完美去掉隐藏 elementui 侧边导航菜单出现的滚动条，局部去掉 el-menu 菜单显示的滚动条
高级前端工程师
03-27 5187
element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜单栏滚动条，vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去
vue中全局滚动条隐藏
最新发布
PinelliaLogic的博客
05-11 203
vue中全局滚动条隐藏。
关于滚动条
10-21 284
/*定义滚动条轨道*/ #style-3::-webkit-scrollbar-track { /*-webkit-box-shadow: ;*/ } /*定义滚动条高宽及背景*/ #style-3::-webkit-scrollbar { width: ; } /*定义滑块*/ #style-3::-webkit-scrollbar-thumb { ...
去除页面的滚动条
阿毛的博客
10-13 392
/*webkit内核*/ .dom::-webkit-scrollbar { width:0px; height:0px; } <!--针对火狐浏览器滚动条消失--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script> //针对火狐浏览器滚动条消失 $(".dom").niceScroll(
如何去除页面滚动条
热门推荐
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"> 全部...
html去除页面的滑动条
WzhCsdnd的博客
03-11 7395
html去除页面的滑动条的几种方法
JS实现的页面自定义滚动条效果
11-25
本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考，具体如下： 这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动...
layer弹出层 iframe层去掉滚动条的实例代码
10-18
在这个问题中，我们关注的是如何在layer弹出层中的iframe层去除滚动条，以保持页面的整洁和用户体验。 首先，让我们深入理解一下涉及到的几个概念： 1. **layer**：Layer是基于jQuery的一个轻量级的弹窗插件，提供...
JS去除iframe滚动条的方法
12-10
在网页设计中，有时我们可能不希望`iframe`元素显示滚动条，以保持页面的整洁和一致性。`iframe`（Inline Frame）是一种HTML标签，用于在网页中嵌入另一个文档，比如网页、视频或者地图等。`iframe`的滚动条默认情况...
纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）
01-19
移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { display: none; } PC 端 PC 端对兼容性的要求相对来...
xp去掉开机滚动条
03-27
用户可能会觉得滚动条的存在降低了开机速度的感知，因此有时会寻求方法去除它，以达到视觉上的快速启动效果。实际上，去掉开机滚动条并不意味着真正加快了启动时间，但可以消除用户的等待焦虑感。 "xp去掉开机滚动...
vue.js-div滚动条隐藏但有滚动效果的实现方法
11-29
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐 var evt = window.event || arguments[0]
textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法
12-13
在IE下文本框textarea会显示滚动条（如下：） 去掉textarea横向或纵向滚动条办法： <textarea style="overflow:hidden"></textarea> 可以通过overflow-x:hidden和overflow-y:hidden控制横向和纵向滚动条 要设置textarea文本域的滚动条是否开启，使用style.overflow-x属性来控制。如：如果要隐藏该文本域的横向滚动条，在style属性中增加overflow-x属性控制，如下： <textarea id=txtComments style="overflow-x:hidden"></textare
在vue中实现禁止屏幕滚动,禁止屏幕滑动
12-28
今天写了一个Vue弹层组件，用来全屏查看图片的，大概是下面这么一个效果： 其中背景是透明色的，但是弹出这个组件时手指滑动、鼠标滚轮滑动，底部页面是会动。 作为自己开发的一个常用的组件，这种bug当然是要解决的。 于是学艺不精的我在网上找了蛮久的，看了不少博客，看了不少观点和方法。终于找到了一个最简单、最实在的方法， 代码如下： ... 首先，这个div就是整个遮罩组件的根组件，核心就是d
vue项目去掉网页滚动条
weixin_43550562的博客
08-24 1万+
去掉网页滚动条
Vue去除滚动条（div加el-table)兼容firefox
qq_41038412的博客
12-16 3967
1.el-table去除滚动条 .el-table { height: calc(100vh - 280px);//固定高度 overflow-y: auto;//设置滚动 scrollbar-color: transparent transparent;//兼容火狐 &.el-table--scrollable-y ::-webkit-scrollbar { displa
vue elementui table去掉滚动条与实现表格自动滚动且无滚动条
Smile yourlife
07-25 6155
现在需求是右侧滚动条不好看，需要去除滚动条，并隐藏滚动条所占列的位置。让他可以滚动但是不出现滚动条,不然即时隐藏了滚动条也会有一个空白列影响占位的。当table内容列过多时，可通过height属性设置table高度以固定table高度、固定表头，使table内容可以滚动。如果样式不想影响全局，可以使用样式穿透。autoScroll.js 工具类。下面记录代码，亲测有效。
vue的css取消滑动条，适应在不同的屏幕上
qq_44267691的博客
09-19 2015
①首先，也是最简单的应当用百分比%去设置width和height，而不是用px将其写死。其次，内部元素盒子的布局，也应该用类似于 width:calc(100% - 180px);这样的方法去动态设置，以应对不同的界面。可以看出，当宽度大于1766，就用第二个main-big的样式；在新建一个vue.config.js中，可以如下配置，引入stylus文件。众所周知，当我们的页面开发完成后，在不同的屏幕上，会呈现出不一样的效果。再在APP.vue的style标签中，引入设置的css变量。
laui的select的option加滚动条
07-01
### 回答1： 为了在laui的select中添加滚动条，我们可以使用以下步骤： 1. 首先，在laui的select标签中，添加一个固定高度的样式，例如：style="height: 200px;"，该高度可以根据页面设计和需求进行调整。 2. 然后，在laui的select标签内部，添加一个div容器来包裹所有的option标签，并设置该div容器的样式为：style="overflow-y: scroll;"以创建垂直滚动条。 3. 最后，在div容器中，放置所有的option标签。 下面是一个示例代码： ``` <select style="height: 200px;"> <div style="overflow-y: scroll;"> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> <option>选项6</option> <option>选项7</option> <option>选项8</option> <option>选项9</option> <option>选项10</option> <!-- 添加更多的选项 --> </div> </select> ``` 通过以上步骤，我们可以在laui的select中添加一个带有滚动条的选项列表，使得当选项过多时，用户可以通过滚动条进行选择。 ### 回答2： 要给一个`<select>`元素的`<option>`添加滚动条，你可以使用一些简单的CSS和一点额外的HTML代码来实现。下面是一个实现这个效果的步骤： 1. 首先，在`<select>`元素前后分别添加一个`<div>`容器元素，例如`<div class="select-wrapper">`。这个容器将会用来创建滚动条。 2. 然后，给这个容器设置一定的高度，例如`height: 200px;`。这会将`<select>`元素包裹在一个固定高度的容器中。 3. 接下来，给这个容器设置`overflow: auto;`。这会创建一个垂直滚动条，并且只在内容溢出容器高度时显示。 4. 最后，为了使滚动条在`<select>`元素的`<option>`上正常工作，你可能需要给`<option>`元素添加一定的高度，例如`height: 30px;`。 综上所述，一个添加滚动条的`<select>`元素及其`<option>`的代码如下所示： ```html <div class="select-wrapper"> <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <!-- ... 其他选项 ... --> </select> </div> ``` 对应的CSS样式如下所示： ```css .select-wrapper { height: 200px; overflow: auto; } select { height: 30px; } ``` 这样，当`<select>`元素的选项超过容器高度时，就会显示滚动条，用户可以通过滚动条来查看和选择选项。 ### 回答3： 要在select标签的option中添加滚动条，可以使用CSS来实现。首先，需要设置select标签的高度，以便可以限制选项的显示区域。然后，添加一个div元素来包含select标签，并设置它的最大高度和overflow属性为auto，这样当选项超过容器的高度时，就会出现滚动条。 以下是一个示例的代码： HTML: ``` <div class="select-wrapper"> <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> <option>选项6</option> <option>选项7</option> <option>选项8</option> <option>选项9</option> <option>选项10</option> </select> </div> ``` CSS: ``` .select-wrapper { height: 100px; /* 设置select容器的高度 */ overflow: auto; /* 设置溢出内容时出现滚动条 */ border: 1px solid #ccc; /* 可选：为容器添加边框样式 */ } select { width: 100%; /* 设置select标签的宽度为父容器的宽度 */ height: 100%; /* 设置select标签的高度为父容器的高度 */ border: none; /* 可选：去掉select标签的边框样式 */ } ``` 使用上述代码，当选项的数量超过100px的高度时，select容器会出现垂直滚动条，以便用户可以通过滚动来查看所有选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值