滚动条

iScroll 4还包括如下的特性： （1）缩放（Pinch/Zoom） （2）拉动刷新（Pull up/down to refresh） （3）速度和性能提升 （4）精确捕捉元素 （5）自定义滚动条 常用的参数如下： hScroll false 禁止横向滚动 true横向滚动 默认为true vScroll false 精致垂直滚动 true垂直滚动 默认为true hScrollbar false隐藏水平方向上的滚动条 vScrollbar false 隐藏垂直方向上的滚动条 fixedScrollbar 超出了scroller的边界滚动条是否收缩。Android上为true， iOS上为false fadeScrollbar false 指定在无渐隐效果时隐藏滚动条 hideScrollbar 在没有用户交互时隐藏滚动条 默认为true bounce 启用或禁用边界的反弹，默认为true momentum 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用 lockDirection false取消拖动锁定， true拖动只能在一个方向上（up/down 或者left/right） 通用方法： （1）refresh 在DOM树发生变化时，应该调用此方法 （2）scrollTo() 滚动到某个位置 eg: myscroll.scrollTo(0,10,200

一、CSS 1、css(name) 访问第一个匹配元素的样式属性。 返回值 String 参数 name (String) : 要访问的属性名称 示例： $("p").css("color"); //取得第一个段落的color样式属性的值 2、css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。 返回值 jQuery 参数 properties (Map) : 要设置为样式属性的名/值对 示例： //1 将所有段落的字体颜色设为红色并且背景为蓝色 $("p").css({ color: "#ff0011", background: "blue" }); //2 如果属性名包含 "-"的话，必须使用引号 $("p").css({ "margin-left": "10px", "background-color": "blue" }); 3、css(name,value) 在所有匹配的元素中，设置一个样式属性的值。数字将自动转化为像素值 返回值 jQuery 参数 name (value) : 属性名 value (String, Number) : 属性值 示例： $("p").css("color","red"); //将所有段落字体设为红色 二、位置 1、offset()

终于学会怎么写后台侧列表（隐藏滚动条） 首先一个标准后台程序有三部分组成： 顶部条 左侧列表 右侧正文内容 现在要求如下： 左侧列表可以滑动，但不可见滚动条 左侧列表滑动时，顶部条不能动 右侧内容区高度不够时，左侧依然可以滑动 实现和办法： 左侧列表和顶部条定位使用 position:fixed 左侧列表要使用 bottom:0（left:0） ，否则不能滑动 左侧列表使用 overflow-x:hidden;overflow-y:scroll; 左侧列表 宽度 要和右侧内容的 margin-left 后对齐， 其实就是要用右侧正文内容盖住左侧列表的滚动条而隐藏，而盖住的方式是左侧使用 fixed ，右侧使用 relative 。 html，body 使用 height:100% （为满足右侧正文高度） 右侧正文内容区使用 height:100% （来撑起高度） 右侧正文内容区使用 position:relative;（用来覆盖左侧多余的滚动条） body使用 overflow-x:hidden; （非必须） 右侧内容区一定要给个背景颜色，用来盖住左侧滚动条 左侧列表使用height:100% 简单用代码来写就是： html,body{ height:100%; overflow-x:hidden; /*非必须*/ } .topbar{ position:fixed; /*必须*/

在 HTML DOM 中, 元素对象 代表着一个 HTML 元素 。 元素对象 的 子节点 可以是, 可以是元素节点，文本节点，注释节点。 NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。 Element对象的属性和方法 1.元素特性相关属性 　　element.id 设置/返回元素的id 　　element.tagName 设置/返回元素的标签名 　　element.dir 设置/返回元素的文字方向 　　element.accessKey 设置/返回元素的快捷键 　　element.draggable 设置/返回元素的是否可拖拽 　　element.lang 设置/返回元素的语言 　　element.tabIndex 设置/返回元素的在Tab键遍历时的顺序，-1表示不可被遍历 　　element.hidden 设置/返回元素 是否可见 　　element.contentEditable 设置/返回元素 是否可编辑 　　element.isContentEditable 返回元素 是否可编辑 2.元素状态相关属性 　　element.attributes 设置/返回元素的属性，返回一个类似数组的对象。 　　element.className 设置/返回元素的类名，它的值是一个字符串，每个class之间用空格分隔 　　element.classList 设置

最近开发一款产品，要求PC端两列展示： 移动端展示： 使用display：flex布局，在最外面的wrap上添加overflow-y：auto；手机端使用媒体查询将两列宽度设为100%； 出现问题：当表格数据比较大时，PC端与安卓滚动条出现，滚动无问题，但是苹果IOS在表格里滑动无法触发滚动； 解决方法： 在滚动容器内加 -webkit-overflow-scrolling: touch 添加后偶尔会出现滑动不流畅，仔细查了-webkit-overflow-scrolling该属性 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto : 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch : 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。 网上查了许多资料，具体有下面的几个坑： 在safari上，使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动（本次问题） 通过动态添加内容撑开容器，结果根本不能滑动的bug（本次问题） 在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug（本次问题） 手势可穿过其他元素触发元素滚动

offset() 一、语法 1、 返回偏移坐标 $(selector).offset(); top: $(selector).offset().top; left: $(selector).offset().left; 获取匹配元素在当前视口的相对偏移。 总是计 算相对于文档的位置 ，无论元素的父元素或祖先元素的position属性是什么。 返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。 2. css()---left top css的left和top属性指的是距最近的一个 position属性为relative或者absolute的父级元素的左边后上边的距离 ， 明白了css的left和top的含义，可以看下 jquery获取css的值 ，因为left和top也都是普通的css属性所以可以使用如下代码来获取 var left = $('#test').css('left'); var top = $('#test').css('top'); 3.scrollTop() 方法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。 如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。 语法 $(selector).scrollTop(offset) 来源： http

1.scrollLeft() scrollLeft() 方法设置或返回被选元素的水平滚动条位置。 提示： 当滚动条位于最左侧时，位置是 0。 当用于返回位置时： 该方法返回第一个匹配元素的滚动条的水平位置。 $(selector).scrollLeft() 当用于设置位置时： 该方法设置所有匹配元素的滚动条的水平位置。 $(selector).scrollLeft(position) 2.scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的垂直滚动条位置。 提示： 当滚动条位于最顶部时，位置是 0。 当用于返回位置时： 该方法返回第一个匹配元素的滚动条的垂直位置。 $(selector).scrollTop() 当用于设置位置时： 该方法设置所有匹配元素的滚动条的垂直位置。 $(selector).scrollTop(position) 来源： https://www.cnblogs.com/wanguofeng/p/10784214.html

没有兼容谷歌浏览器的滚动条很细，兼容以后设置默认样式使得滚动条的高度样式正常： ::-webkit-scrollbar{ height:auto; } 来源： https://www.cnblogs.com/super-chao/p/11323398.html

滚动条的CSS属性集是从Internet Explorer 5.5开始的一个专有风格hook，这让设计师创建浏览器的滚动条的自定义主题。目前,它暴露在使用Webkit渲染引擎(和Blink)，厂商前缀为Webkit的浏览器。 -webkit-scrollbar家族的属性由七种不同的伪元素组成的一个完整的滚动条UI元素： ::-webkit-scrollbar ，滚动条的背景。它通常是由其他元素覆盖。 ::-webkit-scrollbar-button ，滚动条方向的按钮。 ::-webkit-scrollbar-track ，进度条下面的空白区域。 ::-webkit-scrollbar-track-piece ，内层轨道，它会覆盖第三个属性的样式。 ::-webkit-scrollbar-thumb ，滚动条里面可以拖动的那部分。 ::-webkit-scrollbar-corner ，边角，两个滚动条交汇处。 ::-webkit-resizer ，两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上） ::-webkit-scrollbar { width : 10px ; /*对垂直流动条有效*/ height : 10px ; /*对水平流动条有效*/ } /*滚动条的轨道颜色、内阴影及圆角*/ ::-webkit-scrollbar-track { -webkit

：解决隐藏滚动条的方法 再小程序开发的时候如果使用scroll-view 会出现默认滚动条 ::webkit-scrollbar{ width:0; height:0; color:transparent } ：：webkit-scrollbar{ display:none; } !!可以去掉横向的滚动条，右侧默认滚动条不起作用。 来源： https://blog.csdn.net/weixin_42414657/article/details/98881533