scroll事件详解

以前眼高手低，不够扎实，面试的时候总是处理过，却想不出来细节，这次开始慢慢整理，蜗牛继续爬坡

CSS

一般情况下，如果出现内容大于浏览器的时候，需要添加样式 overflow：scroll

关于scroll的样式有以下可以根据需求调整：

滚动条的设置

1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等

2. ::-webkit-scrollbar-button 滚动条两端的按钮

3. ::-webkit-scrollbar-track 外层轨道

4. ::-webkit-scrollbar-track-piece 内层滚动槽

5. ::-webkit-scrollbar-thumb 滚动的滑块

6. ::-webkit-scrollbar-corner 边角

7. ::-webkit-resizer 定义右下角拖动块的样式

根据需要添加scroll的容器，假设name为scrollPart ，则使用以上就可以修改样式，案例为以下：

.scrollPart::-webkit-scrollbar {width: 15px;height: 100%;
}
........

添加scroll事件

componentDidMount() {window.addEventListener('scroll', this.handleScroll, true);
}
componentWillUnmount() {window.removeEventListener('scroll', this.handleScroll, true);
}
handleScroll = e => {if (e.srcElement.getAttribute('class') === 'ant-table-body') return;const { scrollTop, clientHeight, scrollHeight } = e.srcElement;if (clientHeight < scrollHeight - scrollTop) {this.footer.style.position = 'fixed';this.footer.style.width = '79%';this.footer.style.paddingRight = '16px';this.footer.style.marginRight = '16px';} else {this.footer.style.position = 'absolute';this.footer.style.width = '100%';this.footer.style.marginRight = 0;}
};

在react中无法添加在具体的元素上的，在didmount和unmount生命钩子中无法获取到元素，无法实现监听

滚动穿透

当前页面有带滚动的弹窗，往往会因为window监听当弹窗滚动的时候触发遮罩层所覆盖页面的监听效果。这时候，就需要处理滚动穿透问题。

当modal内部的添加overflow：scroll 会被遮罩层所继承，继承后出现，两个滚动条：modal滚动条以及遮罩层滚动条，两种方法，一种是根据页面高度调整弹窗的高度，当弹窗的高度不会大于当前页面高度时，不会影响到外围的滚动条。另外一种就是网上所说的找到遮罩层对应的滚动条设置overflow：hidden，设置底部需不滑动页面为fixed

scroll事件详解相关推荐

JavaScript事件详解-jQuery的事件实现（三）
正文本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
php jquery点击事件,jQuery操作html元素点击事件详解
这次给大家带来jQuery操作html元素点击事件详解,jQuery操作html元素点击事件的注意事项有哪些,下面就是实战案例,一起来看一下. 移除或禁用html元素的点击事件可以通过css实现也可以 ...
ASP.NET页面事件详解
ASP.NET页面事件详解 ASP.NET页面事件详解 1.Page_Init()事件当页面初始化时发生此事件.可以利用Page_Init()将该事件与要在.NET页面上显示控件之前的运行的代码建立 ...
WPF中的鼠标事件详解
WPF中的鼠标事件详解 Uielement和ContentElement都定义了十个以Mouse开头的事件,8个以PreviewMouse开头的事件,MouseMove,PreviewMouseMov ...
Spring Data JPA 从入门到精通~Auditing及其事件详解
Auditing 及其事件详解 Auditing 翻译过来是审计和审核,Spring 的优秀之处在于帮我们想到了很多繁琐事情的解决方案,我们在实际的业务系统中,针对一张表的操作大部分是需要记录谁什么时 ...
移动端开发touchstart，touchmove，touchend事件详解和项目
移动端开发touchstart,touchmove,touchend事件详解和项目最近在做移动端的开发,在一个"服务商管理"页面使用到了触摸事件"touchstart& ...
SQL Server 默认跟踪 -- 捕获事件详解
SQL Server 默认跟踪 -- 捕获事件详解哪些具体事件默认跟踪文件能够捕获到? --returns full list of events SELECT * FROM sys.trace_e ...
android 拖动点击事件,Android事件详解——拖放事件DragEvent
1.Android拖放框架的作用? 利用Android的拖放框架,可以让用户用拖放手势把一个View中的数据移到当前layout内的另一个View中去. 2.拖放框架的内容? 1)拖放事件类 2)拖放 ...
element 问号_element ui 对话框el-dialog关闭事件详解
element ui 对话框el-dialog关闭事件详解通常会有需求,在关闭弹框后需要清空填写的数据,这时候就需要关闭事件了在标签中加入@close='closeDialog' mothods中 ...

scroll事件详解

CSS

添加scroll事件

滚动穿透

scroll事件详解相关推荐

最新文章

热门文章