滚动条

微信小程序使用scroll-view横向布局在iOS和Android上有不同的展示，iOS无滚动条，Android有滚动条，按照产品需求需要隐藏横向滚动条。 在网上搜索一些，说是以下几段代码可以实现，代码如下： 使用组件的伪类。亲测，在小程序端无效 /隐藏滚动条/ ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; } /隐藏滚动条/ ::-webkit-scrollbar{ display: none; } 试用了伪类失效，只能自己写css了，亲测，在小程序Android有效。包裹 scroll-view 的大盒子有明确的宽和加上样式–> overflow:hidden;white-space:nowrap; 代码如下： <view class="scroll-box"> <scroll-view class="scroll-H" scroll-x="true" > <view class="scroll-H-list"> <view class="scroll-H-item" wx:for="{{box_list}}" wx:key="index"> {{item.color}} </view> </view> </scroll-view> </view> .scroll-box { width:

参考： http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——无 e.clientX——相对可视区域的坐标 e.x——无 opera： e.pageX——相对整个页面的坐标 e.layerX——无 e.offsetX——相对当前坐标系的内容区域左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 safari：（这个和chrome是一样的） e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 IE9： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标

http://blog.csdn.net/lzding/article/details/45437707 event.screenX(Y) 即鼠标相对于显示器屏幕左上角x，y坐标。 标准事件属性，所有浏览器都支持 event.clientX(Y) 即鼠标相对于浏览器窗口可视区域（视窗）的X，Y坐标，可视区域不包括工具栏和滚动条。 标准事件属性，所有浏览器支持 event.pageX(Y) 即鼠标相对于 文档坐标 。在没有滚动条的情况下一般宽高度一般与clientX（Y）相等，有滚动条时pageX(Y)=clientX(Y)+横向（纵向）滚动距离。不是标准属性，但是支持度广泛，只有 ie9以前版本不支持 offsetX(Y) 触发点相对被触发dom的左上角距离。 IE事件属性，火狐浏览器不支持 layerX(Y) 触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距。欧鹏浏览器、IE9以前不支持。 来源： oschina 链接： https://my.oschina.net/u/3759734/blog/1607365

对HTML与dody的一些研究与理解 一 看到这篇文章的想法 今天在研究移动端的一个效果时 看到了张老师写的这篇文章 ；我们或许一直在学一些主流的知识 ，怒怼框架去问在自己的简历上写一些 华丽的框架学习活开发经验， 但是这些真的能决定我们的高度吗 知识不断的在更新 。。我们要学的东西很多 框架的更替速度也会越来越快 我们或许很短的时间的就可以学习一个框架 但是 真正难的真正决定我们对平还是对这些基础的理解 下面进入正题 二、关于html与body的一些表现 1.背景色 一般情况下，我们css控制的最高结点就是body，例如设置：body{background:#069;}则浏览器界面就是完全的#068的背景色。这里看上去是body标签下的背景色起作用了，我到不这么认为，这里不是body的background起作用，而是body作为一个根结点起作用了，html标签未被激活，body但当类似于根结点的结点，其background背景色被浏览器俘获，浏览器界面背景色为background的背景色，以上是我的推论，这种推论不是我凭空想象出来的，而是有一定的根据的。看下面的一段css代码： body{background:#069; margin:100px; border:30px solid #093;} 意思很简明：外边距100像素，边框30像素，背景色#069，按照对一般标签的理解

各大浏览器去除滚动条 html{ /*火狐下隐藏滚动条 测试后不管用*/ overflow:-moz-scrollbars-none; /*隐藏滚动条，当IE下溢出，仍然可以滚动*/ -ms-overflow-style:none; } /*火狐下隐藏滚动条 */ .wrap{ scrollbar-width: none; /* overflow: -moz-scrollbars-none; */ } //谷歌适用 ::-webkit-scrollbar{ display:none; } 来源： CSDN 作者： 吾谓谁？ 链接： https://blog.csdn.net/weixin_42646650/article/details/104530628

RichTextBox是一种可用于显示、输入和操作格式文本，除了可以实现TextBox的所有功能，还能提供富文本的显示功能。 控件除具有TextBox 控件的所有功能外，还能设定文字颜色、字体和段落格式，支持字符串查找功能，支持rtf格式等功能。 下面就其的常用到的功能进行介绍。 一、显示滚动条 RichTextBox可设置Multiline属性来控制是否显示滚动套，true为是，false为否。，默认为true。（此项属性在TextBox亦可实现） 滚动条分为两种：水平(Horizontal)滚动条和垂直(Vertical)滚动条，通过RichTextBox的ScrollBars属性设置如何显示滚动条。（此项属性在TextBox亦可实现） ScrollBars属性值： 1、Both：只有当文本超过RichTextBox的宽度或长度时，才显示水平滚动条或垂直滚动条，或两个滚动条都显示。 2、None：从不显示任何类型的滚动条 。 3、Horizontal：只有当文本超过RichTextBox的宽度时，才显示水平滚动条。必须将WordWrap属性设置为false，才会出现这种情况。（下面将会给出解释） 4、Vertical：只有档文本超过RichTextBox的高度时，才显示垂直滚动条。 5、ForcedHorizontal：当WordWrap属性设置为false时，显示水平滚动条

在项目中，滚动条不可避免的要出现。设置统一规范的滚动条也是必然。用一个独立的css文件即可修改整个项目中的滚动条样式 。 scrollBar.css: /* 滚动条有滑块的轨道部分 */ ::-webkit-scrollbar-track-piece { background-color: #00000000; border-radius: 0; } /* 整个滚动条 */ ::-webkit-scrollbar { width: 8px; } /* 滚动条竖向滑块 */ ::-webkit-scrollbar-thumb:vertical { background-color: rgba(255, 255, 255, .1); border-radius: 2px; } /* 滚动条竖向滑块hover */ ::-webkit-scrollbar-thumb:vertical:hover { background-color: rgba(255, 255, 255, .2); border-radius: 4px; } /* 滚动条横向滑块 */ ::-webkit-scrollbar-thumb:horizontal { background-color: rgba(255, 255, 255, .1); border-radius: 2px; } /*

承上： 页面内拖拽方框 、 页面内拖动、解决页面内拖动选中文字的问题 新建一个div2，并且在div2中嵌入一个div3。div3的宽由div2限定，高由文字撑开。现在要将div3中的文字滚动，那么需要一个滚动条，当滚动条中的红色块从左到右滚动时，div3中的文字也随之滚动。 新建滚动条。当div1从左到右移动时，其在父级div中的坐标相对于父级的宽度从0到1逐渐变化，该比值存在scale变量中。 <!DOCTYPE html> <html> <head> <title>自定义滚动条</title> </head> <body> <div id="parent"> <div id="div1"></div> </div> </body> <style type="text/css"> #parent{width: 600px; height: 20px; background-color: #CCC; position: relative; margin: 0 auto; } #div1{ width: 20px; height: 20px; background-color: red; position: absolute; left: 0; top: 0; } </style> <script type="text/javascript"> var oDiv1 =

　因为做公司官网需要，从网上找了滚动条的样式，但是都不怎么好看，自己比照着写了一个 .chengpin .item::-webkit-scrollbar{/*滚动条整体样式*/ width: 5px; height: 5px; } .chengpin .item::-webkit-scrollbar-thumb{/*滚动条里面小方块*/ height: 5px; border-radius: 20px; background-color: #c9c9c9; }　　 具体是这样的：没有定义滚动条里面的轨道 .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0; background: rgba(0,0,0,0.1); } 　参考文章：https://www.lyblog.net/detail/314.html 　 来源： https://www.cnblogs.com/wlingling2017/p/7868237.html

针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下： 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动） 3. ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） 4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。 5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分 6. ::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方 7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件 滚动条样式/颜色组成部分 scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ scrollbar-face-color: #333; /*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/ scrollbar-shadow-color: