CSS-界面滚动时不显示滚动条

设置滚动条的样式:
div::-webkit-scrollbar {
  width: 0;
}

关于::-webkit-scrollbar

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.

CSS滚动条选择器

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

  • ::-webkit-scrollbar — 整个滚动条.
  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
  • ::-webkit-scrollbar-track — 滚动条轨道.
  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
  • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

语法

::-webkit-scrollbar { styles here }

例子

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}

.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000;
}

原文地址:https://www.cnblogs.com/vickylinj/p/12368289.html

时间: 2024-10-04 15:04:12

CSS-界面滚动时不显示滚动条的相关文章

【解决方法】EasyUI DataGrid无数据时不显示滚动条问题

在dataGrid的定义中添加如下代码: JavaScript Code 1 2 3 4 5 6 7 8 9 10 11 onLoadSuccess : function (data) { if (data.total == 0) { $('#dg').datagrid('insertRow', { row : {} }); $("tr[datagrid-row-index='0']").css({ "visibility" : "hidden"

div可以滚动但不显示滚动条

首先有3个div, 第1个,固定大小是200*200(单位为px,下同) 第2个,不固定大小,其大小要用第3个div把个撑开,但是这个div必需要有滚动条, 第3个,固定大小与第1个div保持一致200*200 <div style="width: 200px;height: 200px; border: 5px solid red; position: relative;overflow: hidden;"> <div id="abc" styl

JAVA Eclipse开发Android如何让超出界面的部分自动显示滚动条

在原有布局的最外围添加一层ScrollView,注意原有布局的声明也要删了 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="ma

axure 制作滚动效果(不显示滚动条)

笔者在上一篇文章<axure制作app侧滑菜单>中介绍了淘宝app筛选菜单的制作方法,但筛选菜单中的内容仅仅填充了"一屏"的内容,如果内容比较多,就需要菜单能够上下滚动,且仅仅是菜单部分滚动,其他商品列表部分(背景)无需滚动,本文介绍一下实现方法: 上篇<axure制作app侧滑菜单>博文地址: http://pmdrx.blog.51cto.com/11810835/1911380 要是实现局部滚动,动态面板即可实现,但动态面板的滚动条是不能隐藏的,这个时候我

WOW.js和animate.css让页面滚动时显示动画

官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画效果,有漂亮的动画效果,依赖于Animate.css. 2.Animate.css (下载https://daneden.github.io/animate.css/)非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画 使用方法 1.引入文件<link rel="stylesheet

PC版模块滚动不显示滚动条效果

以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现. 此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现. HTML: <div class="sidebar"> <div class="sidebar-bd"> 内容 </div> </div> CSS: .sidebar{ width: 50px; position: fixed

css控制背景图像不随滚动条的滚动而滚动

这几天在写一个demo,设置背景图像, background: url("../images/bg.jpg") repeat ; 在使用 $(window).scroll(function() { ....}); 监听滚动条时,在google下正常运行,背景图像没有异常 在ie.360.火狐下滚动滚动条时,背景图像一闪一闪的,很难受. 百度:说需要调显示器的监视器的屏幕刷新频率 > 70 Hz . 可是我的电脑只有60Hz ,那么问题来了,很多小伙伴的电脑或许跟我的一样,那怎么办

CSS鼠标经过时显示

CSS鼠标经过时显示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS Tooltips(鼠标经过时显示)</title> <style type="text/css"> /*Tooltips*/ .tooltips{ position:relative; /*这

div 显示滚动条的CSS代码

div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border:1px solid;"> 这里是你要显示的内容 </div> div显示上下滚动条的css代码 <div style="width:260px;height:120px; overflow-y:scroll; border:1px solid;"> 这里是你要显示的内容 </d