码迷,mamicode.com
首页 > 其他好文 > 详细

关于scroll的前端知识

时间:2020-02-04 15:54:14      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:win   event对象   网页   hid   开发   形式   实现   opera   等等   

大多数网页的内容一屏都无法完全显示,所以我们需要滚动条来支持我们的网页,就有了这篇博客

1.了解滚动条的不同表现

 在不同的系统中

  在windows上,滚动条的样式是上下箭头+中间部分,如果一屏显示不全内容,滚动体默认会存在

  在mac上,滚动条默认是隐藏的,只有在用户触发滚动的时候才会出现滚动条

 在不同浏览器中

  mac系统:所有浏览器都是15px

  window系统:IE、火狐、chrome 17px;edge:16px;opera:15px

  这些不同的滚动条表现对于开发者而言,必须要进行处理比如,样式保持一致、强制出现/不出现滚动条,粘性布局、节流操作等等。

2. 处理滚动条的显示和样式

  css属性overflow,当一个元素内容过大而无法适应 块级上下文的时候怎么做?它是overflow-x 和 overflow-y的简写形式。

  overflow: visible(默认值),内容不会被修剪,会呈现在元素框之外

  overflow: hidden 内容会被修剪,多余内容不可见

  overflow: scroll 内容会被修剪,滚动条一直存在

  overflow: auto 由浏览器定夺,如果修剪内容便会显示滚动条

  修改样式

  chrome、safari、opera等大部分浏览器都支持修改样式、包括宽度、颜色、圆角

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

  css 做 sticky效果,只需确定方向上的距离即可,其他的浏览器帮我们实现

.element {
  position: sticky;
  top: 50px;
}

3. 滚动条的关于js的特性

  1.scroll事件是不能冒泡的,通过console.log打印事件参数event对象的bubbles属性,返回值true是可冒泡 false不冒泡,所以滚动条通信在捕获这个阶段

  2. 滚动条是在容器内容过多的容器上,监听容器元素onscroll事件

  3. 当页面有做个滚动条,内层滚动条会优先滚动,当内层滚动条滚动到边界时,才会启动外层的滚动条

  4.监听滚动条的回调函数尽量使用节流函数

关于scroll的前端知识

标签:win   event对象   网页   hid   开发   形式   实现   opera   等等   

原文地址:https://www.cnblogs.com/czy960731/p/12259532.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!