滚动条

一、使用背景 　　当tree视图中显示内容过多时，会使得列表挤为一堆，样式会变的很难看，这时候就需要增加滚动条 二、实现效果 　　内容超过宽度时，出现横向滚动条 三、实现方法 　　在views.less文件中加入以下代码即可，在odoo10中路径为：web/static/src/less/views.less 来源：博客园 作者： 链接：https://www.cnblogs.com/da-tong/p/11423191.html

1、风格、样式、颜色是否协调 2、界面布局是否整齐、协调（保证全部显示出来的，尽量不要使用滚动条 3、界面操作、标题描述是否恰当（描述有歧义、注意是否有错别字） 4、操作是否符合人们的常规习惯（有没有把相似的功能的控件放在一起，方便操作） 5、提示界面是否符合规范（不应该显示英文的cancel、ok，应该显示中文的确定等） 6、界面中各个控件是否对齐 7、日期控件是否可编辑 8、日期控件的长度是否合理，以修改时可以把时间全部显示出来为准 9、查询结果列表列宽是否合理、标签描述是否合理 10、查询结果列表太宽没有横向滚动提示 11、对于信息比较长的文本，文本框有没有提供自动竖直滚动条 12、数据录入控件是否方便 13、有没有支持Tab键，键的顺序要有条理，不乱跳 14、有没有提供相关的热键 15、控件的提示语描述是否正确 16、模块调用是否统一，相同的模块是否调用同一个界面 17、用滚动条移动页面时，页面的控件是否显示正常 18、日期的正确格式应该是XXXX-XX-XX或XXXX-XX-XX XX:XX:XX 19、页面是否有多余按钮或标签 20、窗口标题或图标是否与菜单栏的统一 21、窗口的最大化、最小化是否能正确切换 22、对于正常的功能，用户可以不必阅读用户手册就能使用 23、执行风险操作时，有确认、删除等提示吗 24、操作顺序是否合理 25、正确性检查：检查页面上的form,

本文主要利用原生的javascript实现滚动条事件的监听，主要涉及的知识： （1）利用React组件渲染一个UI页面 （2）实现锚点链接 （3）实现滚动条 onscroll 事件 其中,利用React渲染的UI延续了 React状态提升 中的内容，只是在这个基础上做了一点相应的修改 最终得到的DOM页面的结构如下： （2）锚点链接：锚点是页面中的一种超链接，主要体现为：通过点击命名锚点，最终指向页面中的某一部分，也就是谁，下面我们将利用本文的实例解释锚点链接： 在上一个图中，如果我们点击右侧悬浮的导航栏中对应的体育，则左侧就指向相应的内容区域，同理，如果点击右侧的新闻，页面也将指向相应的内容区域。 在本次实例中，我们使用id做锚点链接，也就是说，右侧四个悬浮导航菜单中的 href 属性中 # 后的值要与左侧内容区域的 id 属性名相同，具体如下： 其中，用黑色粗实线框住的两个区域就是实线锚点链接的体现。 （3）实现滚动条 onscroll 事件 DOM 的层次结构中，上图中的左侧被黑色粗线框住的三个 div 属于同一类，类名均为 class=“itemarea 首先，我们利用 document.documentElement.scrollTop 获取当前滚动条的坐标位置，由于所有浏览器都支持 document.documentElement.

近期赶项目修bug时，发现一个关于easyUI的滚动条不显示的问题，拿出来晒晒 在做后台的一个列表时，已经完成了，只是没有展示滚动条，也没有分页，但在后期测试时由于鼠标滚轮坏了，有没有滚动条往下拖动，造成只能看到一部分的数据导致的bug（鼠标的滚轮的坏了也能造成bug，想想都是泪，那一瞬间仿佛看到了宇宙毁灭） 上图 jsp代码如下 <thead data-options="frozen:true">//这一行导致的滚动条无法显示 <tr> <th data-options="field:'opt',width:120,align:'center',formatter:optFormatter">操作</th> <th data-options="field:'productId',width:30,align:'center'">ID</th> <th data-options="field:'productName',width:280,align:'left',halign:'center',sortable:true">产品名称</th> </tr> </thead> 其实easyUI是自带滚动条的，他数据的高度或宽度超出其页面的高度或宽度时，就会自动显示滚动条，但当加上上面哪一行注释的代码里面的属性时就会将滚动条覆盖，不会展示滚动条，假如你的鼠标滚轮刚好坏了

<el-scrollbar ref="leftScrollbar" style="height: 600px"></el-scrollbar> this.$refs['leftScrollbar'].wrap.scrollTop = this.$refs['leftScrollbar'].wrap.scrollHeight; 来源： https://www.cnblogs.com/growupup/p/11766219.html

最近自己在自学vue2.0，然后就自己摸索做一个简单的后台管理系统，在做的过程中，总感觉不同浏览器自带的滚动条样式不统一，也很难看，所以就在网上找一些使用vue的滚动条插件。最开始用的是Easy-scroll插件，可是在使用过程中，发现一个问题――由于在开发过程中，需要经常打开开发者选项进行调试，可是只要一开启这个选项，Easy-scroll插件就会出现debugger断点，在网上也一直没找到怎么取消debugger。后来就找到了今天要说的这款插件：vue-happy-scroll。 先张贴一张效果图： 说明：这里会出现横向滚动条，是因为默认是开启横向滚动条的，并且内容区域高度超出了外层盒子的宽度 下面介绍使用方法： 1、安装 vue-happy-scroll 推荐使用npm安装，这样可以跟随你的 webpack 配置去选择怎样打包 npm install vue-happy-scroll --save-dev 当然，你也可以选择使用script标签的方式引入 <!-- 引入css，该链接始终为最新版的资源 --> <link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css"> <!-- 引入vue --> <!-- 引入组件，该链接始终为最新版的资源 -->

1、如果想保持容器能够滚动，同时不想看到丑陋的滚动条，chrome、firefox和移动端上不考虑兼容性直接 　　element::-webkit-scrollbar{ 　　　　display:none 　　} 2、移动端卡顿，加一个属性就能解决了 　　element{　　 　　　　-webkit-overflow-scrolling: touch; } 文章来源: css隐藏滚动条、移动端滚动卡顿的解决

我们需要了解几个基础概念，每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientLeft scrollLeft offsetTop clientTop scrollTop 为了理解这些属性，我们需要知道HTML元素的实际内容有可能比分配用来容纳内容的盒子更大，因此可能会出现滚动条，内容区域是视口，当实际内容比视口大的时候，需要把元素的滚动条位置考虑进去。 clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分 offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分 clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度 offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离 offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null 来源：博客园

/* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1); } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); border-radius: 10px; background-color: rgba(240, 240, 240, .5); } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); background-color: rgba(240, 240, 240, .5); } 　　 文章来源: https://www.cnblogs.com/web-aqin/p/11244121.html

Date: 2019-3-11 前言 https://blog.csdn.net/soaringlee_fighting 中友情链接里面的循环播放的图标就是采用这种标签实现的。 1、参考 W3school在线测试工具 打赏功能的实现思路 HTML之marquee(文字滚动)详解 HTML Marquee跑马灯 HTML标签marquee实现滚动效果 HTML中视频、音频、图标、滚动条定位、文字滚动效果、iframe的应用 2、HTML网页滚动条实现方法 Marquee是html的标签，所有的主流浏览器都能兼容，用于创建文字滚动。 下面来介绍一下标签的属性： 滚动方向 direction <!--滚动方向 direction 4个值 up down left right 默认从右向左--> < marquee direction = " up " > 我想上滚动 </ marquee > 滚动方式 behavior <!--3个值 scroll-循环滚动 slide-只滚动一次 alternate-来回滚动 默认循环滚动--> < marquee behavior = " slide " > 我只滚动一次 </ marquee > 滚动速度 scrollamount <!--值越大，滚动速度越快 一般5-10比较适宜消息观看--> < marquee scrollamount = "