滚动条

人们在浏览网站的时候是喜欢用“无限滚动”，还是喜欢点击“阅读更多”或“查看更多”?无限滚动消除了分页的需要——分页是将数字内容分离到不同页面的过程。但这种方式真的好吗？ 作者 | Monish reddy 译者 | 风车云马 ，责编 | 屠敏 出品 | CSDN（ID：CSDNnews） 以下为译文： 下面是我对无限滚动的看法，说明为什么它会导致不良后果。 对于某些用户来说，无限滚动会带来压力。对那些习惯查看页脚选项卡的人来说，无休止的滚动活动不仅会令人恼火，还可能带来压力。 你知道卷轴吧?几百年前它就被使用了。无线滚动类似于卷轴，很多网页右边有滚动条，但是无限滚动条不会告诉你何时停止。相对而言，分页可以使浏览大块内容变得很容易。 如果你想在建设和开发网站中使用无限滚动，以下从技术、美学和功能等10个方面建议你不要这样做： 性能问题 随着无限滚动，您将把越来越多的内容加载到内存中。这直接影响了网页性能，因为浏览器要比通常打开页面做更多的工作，客户端需要不断监听与滚动相关的调用。即使这个问题可以解决，但需要花费大量的时间，还不如投入到其他事情上。 页脚被掩盖了 在一个无限滚动的网站中很难发现页脚，但是用户有时候需要访问页脚。一般网站底部会设置页脚，其中包含联系方式、关于我们的信息、隐私政策等信息。如果采用无限滚动的话，可以使用一个粘性页脚，但不选择无限滚动将在更大程度上取悦用户。

壹 ❀ 引 我在angularjs中使用锚点这篇文章中，踩坑并简单实现了楼层导航中点击小图标跳转到对应楼层的功能；但对于楼层导航而言，还有个重要的功能就是，随着滚动条滚动，达到某层时得同步点亮楼层导航的小图片。 由于我前面也说了不打算使用JQ，所以想着用JS去实现它，实现并不难，主要得弄清滚动满足怎样的条件才应该点亮对应楼层，我们先看看实现效果： 贰 ❀ 实现思路 第一点，因为是由滚动触发的楼层判断，所以肯定离不开 onscroll事件 。 第二点，我们貌似要获取每个楼层顶端距离视窗顶部的距离，随着滚动条往下滚动，此距离会不断缩小，当接近到某个距离时我们判定此楼层入画，当然其它楼层都满足此判定。 而JQ提供了一个 offset().top 方法能获取这个值，js中只有一个offsetTop属性，获取的是 距离自己最近position属性为非static的祖先元素的距离 ，此 距离不随滚动条滚动而缩小 。 当然我们有方法模拟计算出 offset().top 的值，但没必要，如果你对JQ的offset().top与js的offsetTop有什么区别，以及对如何模拟出JQ的offset().top的值有兴趣，可以参照博主这篇文章 JQ的offset().top与js的offsetTop区别详解 。 这里我直接引用了我之前博客得到的结论： offset().top = offsetTop

如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个： jScrollPane 和 mCustomScrollbar 。 关于 jScrollPane，大家见过的可能比较多，但是这个插件太过于古老而且功能不强大，效果在几年前非常不错，但是放在现在就不好说了。所以我选择了后者： mCustomScrollbar 。下图是两者官方示例的简单对比： 本文就是介绍如何使用 mCustomScrollbar 这个插件，大部分的内容是翻译自 mCustomScrollbar 官方的介绍页面 ，但是根据自己的理解做了部分的调整和修改，同时增加一些自己在使用中的一些技巧。 关于 mCustomScrollbar mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义网页的滚动条，并且垂直和水平两个方向的滚动条都可以定义，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等。总之，你知道非常好用就是了，:-) 下载 | 演示 如何使用 mCustomScrollbar mCustomScrollbar

页面的制作过程 1 页面的制作过程 1 设计师制作设计图 划分区域 最重要 最复杂 2 前端工程师制作页面 填充内容 2 如何划分区域 用合适的元素来表示不同的区域 已学习 HTML 设置区域的位置、尺寸、背景等样式 CSS 3 划分区域中的 CSS 知识 每个元素都会在页面中生成一个矩形区域 CSS 称该矩形区域为盒子 (box) 2. 盒模型概述 1 盒子的分类 不同的元素产生的盒子类型可能不同 一个元素，产生什么样的盒子，取决于它 CSS 的 display 属性 2 盒子的组成 一个盒子由： margin 、 border 、 padding 、 content 组成 3. CSS 的尺寸单位 在 CSS 中，有很多属性的取值，需要表示为一个尺寸 ， 一个尺寸，由数值和单位组成 。 4. 盒模型 content 内容 含义 用于存放文本或其他元素的区域，类似于一个箱子中存放东西的空间 相关 CSS属性 Overflow 含义：内容溢出时的处理方式 不可继承 默认值： visible 溢出部分仍然显示 其他取值 hidden溢出部分隐藏 scroll在水平和垂直方向上出现滚动条，若溢出，则滚动条可用，否则不可用 auto当内容在水平或垂直方向上溢出时，才在该方向上出现滚动条，否则不出现 min-width 含义：最小宽度保证 width属性的值不小于该属性值 不可继承 默认值

　　滚动条的隐藏 　　-webkit-scrollbar 是一个伪类选择器 　　设置滚动条的样式 　　例如滚动条的隐藏 　　元素::-webkit-scrollbar{ 　　　　 width:0; 　　} 来源： https://www.cnblogs.com/shangjun6/p/11373434.html

只对webkit内核的浏览器，使用伪类来改变滚动条的默认样式。 1. 滚动条组成部分 　　::-webkit-scrollbar 　　　　　　　滚动条整体部分 　　::-webkit-scrollbar-thumb 　　　　滚动条里面的小方块，能向上向下移动（或向左向右移动） 　　::-webkit-scrollbar-track　　　　　滚动条的轨道（里面装有Thumb） 　　::-webkit-scrollbar-button 　　　　滚动条的轨道的两端按钮 　　::-webkit-scrollbar-track-piece 　　内层轨道，滚动条中间部分 　　::-webkit-scrollbar-corner 　　　　边角，即垂直滚动条和水平滚动条的交汇处 　　::-webkit-resizer 　　　　　　　　两个滚动条的交汇处上用于拖动调整元素大小的小控件 　　 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #ffffe0; } ::-webkit-scrollbar { width: 6px; background-color: #ff80bf; } ::-webkit-scrollbar-thumb {

在页面中经常需要使用到返回顶部按钮，如果页面内容过多过长，手动滑动滚动条比较麻烦，所以一般会出现返回顶部按钮，一键回到顶部。本文实现的返回顶部的效果，将按钮在滚动条指定高度出现，并固定的页面指定位置。显示为一张图片，鼠标放上显示的是返回顶部文字提示。实现过程如下： 在html文件中： <div id="return-top" class="top_e"> <img src="/static/img/totop.png" width="60" id="img" > <div style="width:60px;margin:auto;"> <p id='font' style="font-size:20px;margin-left:10px;display:none;">返回<br>顶部</p> </div> </div> 这里外面的div作为返回顶部的外层。 内部有两部分： 第一部分是一张图片，从阿里矢量图片库中下载好的矢量图片，如图： 当然也可以根据自己的需要，选择其他样式和颜色。 第二部分是’返回顶部‘四个字，这里需要换行，所以加了标签。 css样式代码 .top_e{ position:fixed;right:10px;bottom:40px; background:rgba(204,200,255,0.6); border-radius:15px; cursor

目录 -webkit-overflow-scrolling:touch是什么？ 解决safari布局抖动的例子 2.1 方案一 2.2 方案二 探究-webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug 3.1 保证使用了该属性的元素上没有设置定位 3.2 如果添加动态内容页面不能滚动，让子元素height+1 3.3 为什么会有卡住不动的这个bug -webkit-overflow-scrolling:touch的其他坑 最后的吐槽 -webkit-overflow-scrolling:touch是什么？ MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。 在移动端上，在你用overflow-y:scorll属性的时候，你会发现滚动的效果很木，很慢，这时候可以使用-webkit-overflow-scrolling:touch这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅。

对于web上有右侧滚动条的操作 可用使用JS语句执行 拖到底部 js = "var q=document.documentElement.scrollTop=10000"browser.execute_script(js) 拖到顶部 js = "var q=document.documentElement.scrollTop=0"browser.execute_script(js)拖到web中部这个数值就需要实验，摸索了 来源： https://www.cnblogs.com/monogem/p/11362387.html

1. 介绍 1.1 说明 Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。 1.2 主要的值 ① absolute ：绝对定位； 脱离文档流的布局 ，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。 ② relative ：相对定位； 不脱离文档流的布局 ，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 ③ fixed ：固定定位； 脱离文档流的布局 ， 类似于absolute，但不随着滚动条的移动而改变位置。 ④ static ：默认值；默认布局。 1.3 辅助属性 position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)： ①left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素。 ②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。 ③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。 ④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。 上面属性的值可以为负，单位：px 。 2. position 定位方式 2.1 position:absolute 2.1.1 说明