滚动条

HTML - 隐藏滚动条但可以滚动

由 匿名 (未验证) 提交于 2019-12-02 20:32:16
原理: （原理就是遮盖） 1、如果你把子div的140px宽度移除，你就明白其中的奥妙了。 2、原理就是父元素负责滚动，子元素负责遮盖。 解释: 父类的div 负责滚动,宽度比子类的宽度窄也就是: width: scroll(父) < scroll-son <html> <style> .scroll{ overflow-x: hidden; overflow-y: auto; height: 300px; width: 120px; background:red } .scroll-son{ overflow-x: hidden; height:100%; width: 140px; } </style> <div class="scroll"> <div class="scroll-son"> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p

html中table设置滚动条

由 匿名 (未验证) 提交于 2019-12-02 20:21:53
主要是给table放到一个div里去，然后再设置div显示滚动条 <!--div比table大小要小才会显示--> <div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;"> <table id="table" border="1" align="center" width="300px" height="200px"> <tbody> <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr> <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr> <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr> <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr> </tbody> </table> </body> </div> 文章来源: html中table设置滚动条

浏览器端-W3School-HTML：HTML DOM Style 对象

由 别来无恙 提交于 2019-12-02 18:58:39
ylbtech-浏览器端-W3School-HTML：HTML DOM Style 对象 1. 返回顶部 1、 HTML DOM Style 对象 Style 对象 Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。 使用 Style 对象属性的语法： document.getElementById("id").style.property="值" Style 对象的属性： 背景 边框和边距 布局 列表 杂项 定位 打印 滚动条 表格 文本 规范 Background 属性 属性 描述 background 在一行中设置所有的背景属性 backgroundAttachment 设置背景图像 是否固定或随页面滚动 backgroundColor 设置元素的背景颜色 backgroundImage 设置元素的背景图像 backgroundPosition 设置背景图像的起始位置 backgroundPositionX 设置backgroundPosition属性的X坐标 backgroundPositionY 设置backgroundPosition属性的Y坐标 backgroundRepeat 设置 是否及如何重复背景图像 Border 和 Margin 属性 属性 描述 border 在一行设置四个边框的所有属性 borderBottom

移动端隐藏滚动条，css方法

由 谁说我不能喝 提交于 2019-12-02 18:22:24
小白第一次发文记录自己遇到的问题。 关于隐藏移动端滚动条方法很多，这里只说本人用到的。 在PC端隐藏html右侧默认滚动条 html { /*隐藏滚动条，当IE下溢出，仍然可以滚动*/ -ms-overflow-style:none; /*火狐下隐藏滚动条*/ scrollbar-width: none; } /*Chrome下隐藏滚动条，溢出可以透明滚动*/ html::-webkit-scrollbar{width:0px} 火狐和ie/Edge的样式会使页面内所有滚动条隐藏。Chrome只会隐藏右侧默认滚动条，想要隐藏某个标签内滚动条要单独给予样式::-webkit-scrollbar{width:0px}。 移动端隐藏滚动条 上面ie与火狐样式也可用于移动端。但Chrome就不可以了。 这里我只说我用到的方式，Chrome移动端想要用::-webkit-scrollbar{width:0px}的样式。需要设置html,body的width和height html,body{ width: 100%; height: 100%; overflow: scroll;} html::-webkit-scrollbar, body::-webkit-scrollbar{width:0px;height:0px;} body{margin:0;} 这样移动端右侧默认滚动条就隐藏了

火狐浏览器左侧和低侧滚动条的隐藏

由 旧时模样 提交于 2019-12-02 15:02:15
在谷歌和火狐浏览器中使用以下代码只能隐藏 谷歌的滚动条火狐只能出去右侧长的滚动条 //包着左侧菜单栏 <el-scrollbar style="height:100%;overflow-x:hidden!important;" class="scroll_bar"> </el-scrollbar> // 放在vue公共样式中 .form-scroll { overflow-y: auto; margin-top: 5px; } ::-webkit-scrollbar{ width: 0; height: 0; } .form-scroll::-webkit-scrollbar { width: 6px; height: 6px; } .form-scroll::-webkit-scrollbar-thumb { border-radius: 4px; background: #e4e4e4; } .el-scrollbar__wrap { height: 100%; overflow: hidden; } 可以去除右侧滚轮 去除掉火狐中低侧的滚动条 上下结合正好去除 谷歌和火狐的侧菜单的滚动条 /* 处理火狐左侧菜单低侧滚轮 */ 放在vue公共样式中 /* .el-scrollbar__wrap { height: 100%; overflow: hidden; } */ 来源：

js 滚动条 兼容滚动条方法

由 故事扮演 提交于 2019-12-02 11:14:31
window.pageXOffset/pageYOffset x轴/y轴 滚动距离 IE8及以下不兼容 IE8 及以下浏览器 支持 兼容性比较混乱 用时取2个值相加，因为两个值不可能同时存在 一个存在，另一个必然为0 document.body.scrollLeft/scrollTop document.documentElement.scrollLeft/scrollTop 封装 兼容滚动条方法 function getScrollOffset ( ) { if ( window . pageXOffset ) { return { x : window . pageXOffset , y : window . pageYOffset } } else { return { x : document . body . scrollLeft + document . documentElement . scrollLeft , y : document . body . scrollTop + document . documentElement . scrollTop } } } 来源： https://blog.csdn.net/weixin_42448623/article/details/102754674

CSS3自定义滚动条样式 -webkit-scrollbar

由 不想你离开。 提交于 2019-12-02 09:24:05
当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。 首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。 滚动条的css样式主要有三部分组成： 　　1、::-webkit-scrollbar 定义了滚动条整体的样式； 2、::-webkit-scrollbar-thumb 滑块部分； 　 3、::-webkit-scrollbar-thumb 轨道部分； 下面以overflow-y:auto;为例（overflow-x:auto同） html代码： <div class="test test-1"> <div class="scrollbar"></div> </div> css代码： .test{ width: 50px; height: 200px; overflow: auto; float: left; margin: 5px; border: none; } .scrollbar{ width: 30px; height: 300px; margin: 0 auto; } .test-1::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /

css去谷歌火狐IE滚动条

由 血红的双手。 提交于 2019-12-02 08:52:22
.deals::-webkit-scrollbar,.pdfcontent::-webkit-scrollbar,.topPdf::-webkit-scrollbar { display: none; // 谷歌隐藏滚动条 width:0px } .deals,.pdfcontent,.topPdf { overflow:-moz-scrollbars-none; // 火狐隐藏滚动条 scrollbar-width: none; } /*ie10以上隐藏pdf滚动条*/ .deals,.pdfcontent,.topPdf{ -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; overflow: auto; } 来源： https://www

iscroll.js的简单使用方法

由 醉酒当歌 提交于 2019-12-02 02:05:58
参考链接： https://www.cnblogs.com/Renyi-Fan/tag/js%E6%8F%92%E4%BB%B6/default.html?page=2 目录 一、总结 一句话总结：Scroll是一个类，每个需要使用滚动功能的区域均要进行初始化。 二、iscroll.js的简单使用方法（总结） 回到顶部 > 一、总结（点击显示或隐藏总结内容） 一句话总结：Scroll是一个类，每个需要使用滚动功能的区域均要进行初始化。 最佳的 HTML 结构如下： <div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div> iScroll作用于滚动区域的外层。在上面的例子中，UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。 最基本的脚本初始化的方式如下： <script type="text/javascript"> var myScroll = new IScroll('#wrapper'); </script> 回到顶部 二、iscroll.js的简单使用方法（总结） 原文链接： http://caibaojian.com/iscroll-js.html 这篇文章讲到了iscroll的一些使用入门、参数配置和示例，并讲到了滚动条的接口，自定义事件和销毁动作等。原文：
订阅 滚动条