隐藏滚动条、保留鼠标滚动效果

最新推荐文章于 2020-10-25 13:43:07 发布
最新推荐文章于 2020-10-25 13:43:07 发布
阅读量1.3k 收藏
点赞数
分类专栏： html&css 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lvkelly/article/details/60878828
版权

项目开发中，为了美观，经常会隐藏滚动条，但保留滚动效果（滚动条的宽度为18px）。隐藏的原理是利用外面的“div”将滚动条遮盖，具体实例如下：

HTML代码：


CSS代码：


遮盖前效果图：


遮盖后效果图：


如何隐藏滚动条还能实现滚动的功能
ad775202的博客
04-01 645
有时候，我们需要用到滚动条的功能，但是又不需要展示出滚动条给用户看这种奇葩的需求，那么我们要怎么来实现呢？下面我提供了两种方案，适用于pc端、也适用与移动端。 第一种方案，通过样式来隐藏原生的滚动条，下面提供了两种方式，但是这样会导致偶现原生样式的情况 <!doctype html> <html lang="en"> <head> ...
winform下带滚动条的panel
10-16
前两天偶尔需要一个winform下带滚动条的panel，在网上找了许久没有找到相关比较好用的资料，只好自己随便琢磨了琢磨。 现在这个小东西功能很简单，在panel中加入元素，超过panel范围有滚动条，对其中元素能够进行简单的添加、删除和定位（这里用到的是竖向的滚动条，所以用的是AutoScrollPosition.Y，横向的谁用到谁自己琢磨该是什么吧，更复杂一点的定位也需要大家自己去计算分析） 功能特别简单，而且只是一个空架子，所以三分比较多了。但是我喜欢事不过三那句话，所以我所有的资源都是3分，也许本身的价值都是负分，主要是花钱不多图个娱乐的意思 如果对大家多少有点用处一切好说，如果不小心浪费了同志们宝贵的下载积分，只管留言痛骂我好了。 反正本人来这里不是很频繁，因为积分太少，这里的东西但凡有点用处的所需积分又太多。本人水平实在太差，这里的都足以做我的老师，所以也没有什么东西拿出来献丑，自惭形秽之下我只好少来，所以想来也许我应该不怕骂的。 当然，最重要的原因是本人从小到现在：自己尚无明确意识所以也不怎么有记忆的几年、上学十几年、工作十几年几乎一直都是在骂声中度过的。所以对骂声即便没有完全麻木，想来多少还是有点承受能力的
C#中如何隐藏滚动条(ScrollBar)同时又具备自动滚动的功能
mosangbike的专栏
01-08 1万+
C#中如何隐藏滚动条(ScrollBar)同时又具备自动滚动的功能   (2011-01-30 13:38:28) 转载▼ 标签：  it   http://blog.sina.com.cn/s/blog_4b650d650100oa6o.html     Windows上缺省的滚动条虽然样子和颜色都还不错,可惜不符合现在
css隐藏滚动条，保留滚动效果
boKeB1
10-23 408
.element::-webkit-scrollbar { display:none }
纯css,div隐藏滚动条，保留滚动效果
信念堤岸
09-30 661
代码如下： ul,li,ol{padding:0;margin:0;} .nav_wrap{height:300px;width:200px;overflow:hidden;border:1px solid #ccc;margin:20px auto;float:left;} .nav_ul{height:100%;width:220px;overflow-y
winform 影藏panel滚动条
ID_Dexter的博客
04-24 1462
#region 设置滚动条是否显示 [DllImport("user32.dll", CharSet = CharSet.Auto)] public static extern int ShowScrollBar(IntPtr hWnd, int bar, int show); private class SubWindow : NativeW...
invisible-scrollbar:隐藏滚动条但保留其功能
05-22
通过以上方法，我们可以实现标题中提到的“隐藏滚动条但保留其功能”的效果，提高网页的视觉美感，同时确保用户仍能轻松地浏览页面内容。在压缩包文件`invisible-scrollbar-main`中，可能包含了实现这一效果的具体...
vue.js-div滚动条隐藏但有滚动效果的实现方法
10-18
在开发前端页面时，经常会有需要隐藏滚动条但保留滚动功能的场景，这样的设计可以让页面看起来更加简洁美观，同时也使得用户能够继续享受滚动带来的便捷。在Vue.js框架中，我们可以通过一些方法来实现这样的效果。 ...
隐藏滚动条、保留div横向 鼠标滚动效果
最新发布
10-18
隐藏滚动条并且保持`div`元素在水平方向上能够随着鼠标滚轮滚动的效果通常是在响应式设计或者需要优化视觉体验的情况下使用的。这可以通过CSS样式来实现： 1. **隐藏滚动条**：你可以使用`:hover`伪类以及`overflow...
javascript实现滚动条效果
11-20
`隐藏默认滚动条，但保留垂直滚动功能。 - `.scrollbar`：定义了自定义滚动条的样式，包括高度、宽度、圆角半径和背景颜色。 3. **JavaScript**： - `window.onload`：确保在所有DOM元素加载完毕后执行内部的函数...
c# winform 自动隐藏的panel
09-24
可以自动隐藏的panel 例子 ，当鼠标靠近窗体边缘时将展开，离开边缘时将收缩。
css鼠标滚动条隐藏解决方案
gztrljh
10-25 158
https://blog.youkuaiyun.com/liusaint1992/article/details/51277751
winform中的panel滚动条
weixin_30505225的博客
11-07 508
private void panel1_Paint(object sender, PaintEventArgs e) { Control _Control = (Control)sender; ShowScrollBar(_Control.Handle, 4, 0); } /// <summary> /// 禁用panel垂直或者水平滚动条 ...
滚动条的隐藏和滚动的实现
Stark6的博客
08-27 471
滚动条的隐藏 body::-webkit-scrollbar { display: none; } 将类名换成有滚动条的元素即可，在这里安利一篇文章，讲的蛮详细的。 https://juejin.im/post/5a6046dbf265da3e253c3534 滚动的实现 首先需要两个div嵌套，外层div固定宽度并且设置overflow overflow:scroll; ...
去除滚动条
wangjie931125的博客
09-18 312
在默认情况下，HorizontalScrollView控件里面的内容在滚动的情况下，会出现滚动条，为了去掉滚动条，只需要在里面加一句    android:scrollbars="none"。
控制带有滚动条的控件(ListView，TreeView等)的滚动条显示
starts_2000的专栏
07-15 1360
这是一个小小的组件，实现控制带有滚动条的控件(ListView，TreeView等)的滚动条显示。    带有滚动条的控件，通常情况下都是需要显示滚动条的时候，如果水平滚动条和垂直滚动条都需要显示，就一起显示出来。但是有的时候我们只想让其只显示一条滚动条，例如只显示垂直滚动条，我们应该怎么办呢？我们可以通过API函数：ShowScrollBar （查看）来实现。另外，我们可以通过API函数
C#-Winform - 树控件（TreeView）的基本使用
热门推荐
程序鹏
08-27 1万+
树控件就是类似菜单一样的具有层级关系的控件 实现 新建节点 打开vs，新建一个项目 在工具箱中找到TreeView，拖拽进form窗体中 点击在父容器中停靠 然后在属性中多了一个Dock属性，可以选择位置（我选择在左边） 添加一个TextBox，修改Multiline属性（允许多行）为rue，修改Dock属性为Fill 选中TreeView控件，找到Nodes属性，点开弹出TreeNode编辑器，就是在这里添加“树”的节点的 随便添加几个 可以看到...
WinForm中Panel实现用鼠标操作滚动条
Ray的专栏
04-28 3466
由于在WinForm中Panel不能直接响应鼠标的滚动事件，只好采用捕获窗体的滚动事件。 方法如下：在窗体的Load事件注册滚动事件，并增加对应的方法        private void FormSample_Load(object sender, EventArgs e)        {                        //注册事件            this.Mouse
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值