如何隐藏滚动条?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何隐藏滚动条?相关的知识，希望对你有一定的参考价值。
参考技术A 打开“系统属性”- “高级”-“启动和故障恢复”设置，打开“系统启动”区的编辑，在fastdetect的后面加上 /noguiboot，这样在启动的时候就不会再显示滚动条,不过建议先优化下滚动速度..要不其实在不显示的状态下会是以黑屏代替.会停顿很久在“系统属性”里打开“硬件”选项卡，打开“设备管理器”，展开“IDE ATA/ ATAPI 控制器”，双击打开“次要IDE通道”属性，点“高级设置”选项卡，把设备1和2的传送模式改为DMA若可用，设备类型如果可以选择“无”就选为“无”，点确定完成设置，同样的方法设置“主要IDE通道”。
修改注册表来减少预读取，减少进度条等待时间，效果是进度条跑一圈就进入登录画面了，开始→运行→regedit启动注册表编辑器，找HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Memory Management\PrefetchParameters， 有一个键EnablePrefetcher把它的数值改为“1”就可以了 参考技术B 方法一：设置CSS属性overflow为hidden。 <body style="overflow:hidden"> 方法二：设置body元素的scroll属性为no。 <body scroll="no">注意：建议用方法一隐藏滚动条，用方法二的话在IE5.0中无法再用脚本对页面进行滚动进行操作。因为方法只是隐藏滚动条不显示，而方法二是直接设置为没有滚动条。这一点可以在本部分第六章的《问题6》中分别用本例的两种方法设置demo.htm页的滚动条来测试。在IE5.0上，用方法二隐藏demo.htm页滚动条后，控制页面滚动的功能将失效。 技巧：如果只想隐藏横向或纵向上的滚动条，可以用overflow-x或overflow-y来设置。 参考技术C 用键盘
如何在 Angular 组件中隐藏默认浏览器滚动条？
【中文标题】如何在 Angular 组件中隐藏默认浏览器滚动条？【英文标题】：How to hide the default browser scrollbar in an Angular component? 【发布时间】：2021-10-17 09:02:50 【问题描述】：我想出了如何在 Angular 应用程序中全局隐藏滚动条，但我在实际项目中遇到了一个场景，我需要在单个 Angular 组件中隐藏默认滚动条，但在其他组件中可以看到默认滚动条。 ::host 似乎没有解决这个问题。如果有人知道如何解决这个问题，我将非常感谢您的反馈！另外，如果可能的话，我会喜欢 CSS 解决方案，因为我觉得不应该有任何疯狂的解决方案或黑客来解决这个问题。我在下面做了一个快速的stackblitz...
https://stackblitz.com/edit/angular-ivy-syr7do?file=src/styles.css
【问题讨论】：
【参考方案1】：用于在正文中全局隐藏滚动条
body::-webkit-scrollbar
display: none;
在您的 CSS 文件中。
并且在其他组件中使用自定义滚动条，您只需将内容包装在一个容器中并设置您的自定义滚动条。
这是demo。
【讨论】：
【参考方案2】：试试这个：
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar
display: none;
/* Hide scrollbar for Internet explorer and Edge */
.example
-ms-overflow-style: none;
【讨论】：
我试图在组件本身而不是全局隐藏整个测试组件的默认滚动条，而不仅仅是单个类/id【参考方案3】：使用这个
*::-webkit-scrollbar
width: 0px !important;
background-color: white !important;
*::-webkit-scrollbar-thumb
width: 0px !important;
background-color: whitesmoke !important;
border-radius: 0px !important;
*::-webkit-scrollbar:horizontal
width: 0px !important;
background-color: white !important;
*::-webkit-scrollbar-thumb:horizontal
width: 0px !important;
background-color: whitesmoke !important;
border-radius: 0px;
如果需要，请将 * 替换为特定的类/ID。
别忘了加overflow:auto
【讨论】：
我想从 angular 组件中隐藏滚动条，而不是从全局 styles.css 中隐藏。作为这个解释，您可以在 styles.css 文件中使用，但不能在测试组件 css 文件中使用。 我已经提到喜欢用全局选择器替换类/id 请检查 stackblitz。我在您给我的测试组件中实现了该代码，并且仍然出现默认滚动条 stackblitz.com/edit/angular-ivy-5ucaua 立即查看。我做了一些小改动 我试图隐藏组件本身的默认滚动条，而不是在你的分叉堆栈闪电战中的内容类或我的堆栈闪电战中的段落标签中，而不是在全局样式中。希望有帮助。由于某种原因::webkit-scrollbar 在测试组件 css 本身中不起作用以上是关于如何隐藏滚动条?的主要内容，如果未能解决你的问题，请参考以下文章