Web前端中的一个小技巧（隐藏滚动条）

最新推荐文章于 2024-08-20 11:07:04 发布
最新推荐文章于 2024-08-20 11:07:04 发布
阅读量2k 收藏 6
点赞数
分类专栏： Web前端css小技巧 文章标签： 隐藏滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lyksxx/article/details/100848234
版权

Web前端中的一个小技巧（隐藏滚动条）

去除网页中的滚动条，去除之后页面一样可以上下滑动

原理：就是在内容盒子的外面再加一个盒子

​ 外部的盒子设置内容超出后隐藏内容，设置滚动条为隐藏效果

​ 内部的盒子设置height（高）为100%，width（宽为100%+滚动条的宽度），用calc（100% + 滚动条宽度px），设置内容超出后增加滚动条

​ 增加前的样式

在这里插入图片描述

增加后显示效果

在这里插入图片描述

而且依然可以滚动。

代码为：

在这里插入图片描述

Mature a year
关注
专栏目录
web前端开发深圳，jquery设置滚动条位置
m0_60125134的博客
07-24 199
第一章 HTML 1.浏览器页面有哪三层构成，分别是什么，作用是什么? 2.HTML5的优点与缺点？ 3.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? 4.HTML5有哪些新特性、移除了哪些元素？ 5.你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么? 6.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 7.说说你对HTML5认识?（是什么,为什么） 8.对WEB标准以及W3C的理解与认识? 9.HTML5行内元素有哪些,块级元素有哪些, 空元素有
web前端入门到实战：11种常用css样式之滚动条与显示隐藏
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-10 265
滚动条展示 overflow-x: hidden;/是否对内容的左/右边缘进行裁剪/overflow-y: hidden;/是否对内容的上/下边缘进行裁剪/overflow:scroll;/左右滚动/overflow: hidden;/截取/overflow: auto;/自动/ 显示与隐藏可以用display/* display: none; // display: block; // disp...
隐藏滚动条(可滚动).html
08-28
第一次写博客，好像必须上传这个，其实里面就是一个滚动条，隐藏的同时可以滚动。
前端产生滚动条去掉滚动条
m0_52244931的博客
06-10 1226
前端产生滚动条去掉滚动条 代码如下，.sTable是自己起的class类名 .sTable::-webkit-scrollbar{ display: none; }
vue隐藏滚动条
最新发布
XTY__的博客
08-20 370
vue隐藏滚动条
web端 隐藏滚动条
Lavante的博客
01-19 524
【代码】web端 隐藏滚动条。
web开发 隐藏滚动条
HJ7118的博客
06-03 810
/*隐藏滚动条*/ ::-webkit-scrollbar { width: 0; height: 0; overflow: hidden; } ::-webkit-scrollbar-track { -webkit-box-shadow: white;
html语言能隐藏,web前端：css 隐藏滚动条
weixin_34916118的博客
06-07 262
css可以将样式定义在html元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力;允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离;允许随意改变文本的大小...
【前端】隐藏滚动条
洛尧的博客
11-30 1906
overflow样式，隐藏滚动条
最常见web前端开发面试题（二）
11-01
当元素内容超过其容器宽度时，`overflow`属性控制是否显示滚动条，可设置为`hidden`（隐藏溢出内容）、`scroll`（显示滚动条）或`auto`（根据需要显示滚动条）。 4. **IE中文字超出宽度显示省略号**： 使用CSS...
Web端隐藏垂直滚动条且保留滚动效果
ITKouSyou的博客
07-07 1473
在做项目时，发现UI们常常为了快速出图，在设计UI图时只设计一种正常情况下的布局，但是往往实际应用中，内容超出限定区域是很常见的现象，当内容超出时，如果css样式没有设置隐藏则会出现滚动条，而滚动条的出现会使原本的内容区域减少，因此需要隐藏Y轴滚动条的样式并且保留滚动效果，这样才能保证在内容超出限定区域时不影响页面布局。...
html去除页面的滑动条
WzhCsdnd的博客
03-11 8012
html去除页面的滑动条的几种方法
web浏览器_web前端知识扩展，CSS实现隐藏滚动条，解决浏览器兼容性问题
weixin_39560245的博客
11-14 212
前序：CSS本身是一个常用且强大的功能，但是往往很多人在学习的时候会忽视掉其中一些细节的使用，而我们程序员忽视掉一个细节就可能完成不了这道老板出给我们的题目，成为高手的道路也会离我们越来越远，这里我在分享一个我多年来总结下来的一句话-惊喜往往是有准备的人事先预谋的，而不是突然产生的，页面样式好不好看取决于我的知识面有多广分享2种方法实现CSS如何隐藏滚动条，同时仍然可以在任何元素上滚动？我们经常在...
去掉webView滚动条 swift
liwei5bao的博客
11-30 2390
for subView in web!.subviews         {             var v = subView as! UIView             if v.isKindOfClass(UIScrollView.self) == true             {                 (v as! UIScrollView).sh
前端开发：消除横向滚动条
木白的博客
09-07 375
在最外层div style里添加如下样式：
前端开发如何隐藏滚动条
Damon99999的博客
04-19 1466
本文仅提供思路 1：设置两个div。比如你想隐藏右侧的滚动条，你可以将这个滚动区域在加入另一个div，这个div设置overflow: hidden，同时将这个div的宽度设置比内容div宽度小一些，你就可以看到滚动条被遮挡了 2：如果觉得第一种方式麻烦可以将内容div进行内缩进比如margin-right： -20px也是可以达到效果的 ...
WEB 前端面试题 (高能)
m0_64191440的博客
11-11 1224
我们让原型对象等于另一个原型对象的实例,此时原型对象 ,将包含一个指向原型对象的指针，再让原型对象 的实例等于原型对象，如此层层递进就构成了实例和原型的链条，这就是原型链的概念。取得了另外一个值，则原先的引用值引用次数就减 1，当这个值的引用次 数为 0 的时候，说明没有办法再访问这个值了，因此就把所占的内存给。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的。描述：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。
关于滚动条
10-21 298
/*定义滚动条轨道*/ #style-3::-webkit-scrollbar-track { /*-webkit-box-shadow: ;*/ } /*定义滚动条高宽及背景*/ #style-3::-webkit-scrollbar { width: ; } /*定义滑块*/ #style-3::-webkit-scrollbar-thumb { ...
前端CSS消除滚动条但是不影响滚动效果
weixin_43898759的博客
08-14 1882
方法1：自带属性 element::-webkit-scrollbar{ display:{none} } ![在这里插入图片描https://(img-blog.csdnimg.cn/jD801904113224092.png77885)(https://img-blog.csdnimg.n/20190814113224297.png)] 方法2：隐藏DIV（未尝试） 使用JS设置样式 直...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值