js div滚动条触发事件_js触发滚动条事件_js滚动条触发事件 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JQuery Div scrollTop ScrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。

01

SCrollTOP scrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。

02

您找到你想要的搜索结果了吗？

是的

没有找到

如何使用jQuery操作浏览器窗口事件？【jQuery框架应用入门15】

本文主要针对浏览器的窗口事件做一些简要介绍，只在让读者可以入门操作bom有关的事件。

01

JQ事件和事件对象

//mouseover()/mouseout()和mouseenter（）/mouseleave()的区别

02

从零开始学 Web 之移动Web（五）touch事件的缺陷，移动端常用插件

我们在上面《页面分类》的项目中，对 tap 事件的处理使用的是 touch 事件处理的，因为如果使用 click 事件的话，总会有延时。

02

JS事件篇

浏览器加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面上边，在代码执行的时候，页面还没有完全加载

01

面试官：哪些浏览器事件不会冒泡？

回答这个问题之前，我们首先要具备DOM事件流捕获与冒泡的知识，这里只讲JS中如何设置这两种事件监听，例如对body注册点击事件：

02

React----组件生命周期知识点整理

如果是自定义方法，React不会自己去调用，因此一般使用变量+箭头函数的形式，将该自定义方法作为一个事件的触发函数

04

随心所欲的滚动条，远离产品汪（二）

还记得上周咱们说的“随心所欲滚动条，远离产品汪”一文吗？当中介绍了自定义滚动条的基本原理与实现方法，在自定义滚动条实现后，可以通过对滚动条的上下拖动来控制内容区的显示，使用过的朋友会发现，如果对篇幅较长的内容来说，不停的拖动滚动条来查看内容，还是比较麻烦的，于是本文在上篇代码的基础上添加了滚轮事件并处理了相应的兼容问题。本文内容 1、原理结构图 2、滚轮事件及兼容问题概要 3、具体实现步骤 4、小结原理结构图为了方便大家熟悉理解，希望大家能够回顾下上篇“随心所欲滚动条，远离产品汪（一）”，本文继续使用

08

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。

02

学习滚动插件iScroll的简单使用

iScroll是一个高性能，资源占用少，无依赖，跨平台的javascript上拉加载，下拉刷新的滚动插件，目前版本v5.2.0。

03

H5C3第四节

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

03

svelte3.x模拟滚动条组件SvelteScrollbar

前几天有给大家分享一个svelte.js自定义网页版弹窗组件svelte-layer。今天再来分享一个最新基于svelte.js开发的网页虚拟美化滚动条组件svelte-scrollbar。

03

第77天：jQuery事件绑定触发

返回值不同，.height()方法返回的是数字类型(20)，.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候

03

VScroll：基于Vue美化滚动条组件|vue.js自定义滚动条

VScroll 一款基于vue2.x构建的虚拟替代系统原生滚动条组件。支持自定义是否原生滚动条、自动隐藏、滚动条大小及颜色等功能。拥有完美顺滑的滚动体验！

07

vuejs中使用axios时如何实现滑动滚动条来动态加载列表数据

在vuejs中，我们经常使用axios来请求数据，但是有时候，我们请求的数据量很大，那么我们如何实现滑动滚动条来加载数据呢？

05

白话防抖

在讨论防抖和节流之前咱们先看一个需求，需求是这样的，监听页面的scroll事件，当页面拖动到最底端时，加载更多。实现代码如下：

02

React 进阶 - 海量数据处理和其他细节

时间分片主要解决，初次加载，一次性渲染大量数据造成的卡顿现象。浏览器执 js 速度要比渲染 DOM 速度快的多。

01

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个：jScrollPane 和 mCustomScrollbar。

03

这实现牛逼了，原来阮大佬博客的阅读进度功能这么简单

小包在学习阮一峰大佬的《ES6入门教程》时，对文章顶部的阅读进度功能产生了浓厚的兴趣。小包当时猜想应该是使用 JavaScript 实现的，但最近爱上了浩如烟海的 CSS ，于是小包有个大胆的想法，单纯的 CSS 能实现阅读进度功能吗？

03

event兼容,clientX,pageX,offsetX和screenX的区别

3.event兼容,clientX,pageX,offsetX和screenX的区别，图片移动。例 3.1：event兼容,clientX,offsetX和screenX的区别，图片移动。 clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 pageX：参照点也是浏览器内容区域的左上角，但它包括滚动条，即不会随着滚动条而变动 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。包括滚动条。 screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。马克-to-win：做实验时，可以选择四个地点，一个是窗口最左边，一个就是有字的最左边，最后一个选择窗口的最右边。这时出现滚动条，按右箭头到头，点击，你会发现区别。 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav

<script> var car = document.getElementById("img"); function move(event) { var event = event || window.event; /*clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。马克-to-win：做实验时，可以选择三个地点，一个是窗口最左边，一个就是有字的最左边，最后一个选择窗口的最右边。 */

02

虚拟滚动之原理及其封装

前端的业务开发中会遇到一些不分页且数据条数超过1000加载的列表（长列表），不分页的需求在一般前端程序员看来是不可思议的。正常的思考逻辑是，当数据量20w+时，后端报文可去到30+M,查询时间可能去到几十秒。但是前端如果尝试渲染这些数据，花费的时间必定是以分钟计算。通常是3分钟以上。相比之下，由前端优化这个问题更为迫切，责任更为突出（锅更大）。

02

浏览器中的几个高度

载入首批数据，文档高度（ $('html').height() == 2500px ）

02

JS实现无限分页加载——原理图解

由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分页的效果并不好，需要用户手动点击下一页，才能看到更多的内容。有很多网站使用无限分页的模式，即网页视窗到达内容底部就自动加载下一部分的内容... 本篇就无限分页的实现模型，讲述其中奥妙。原理图实现无限分页的过程大致如下： 1 视窗滚动到底部 2 触发加载，添加到现有内容的后面。因此，可能会出现两种情况： 1 当页面的内容很

JQuery iframe宽高度自适应浏览器窗口大小的解决方法

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

02

HTML DOM的各种宽高、偏移位置的属性总结

指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高，包含内边距，但不包括水平滚动条、边框和外边距。

03

js怎么让指定方法先后顺序_jquery固定table表头

当时遇见这个问题是医院手麻系统大批量数据展示，由于是旧项目系统没有使用到前端的架构只能使用JQ,JS, css完成也谢谢给予我支持的同行们

02

js点击按钮返回页面顶部

在进行官网一类的网站建设时，经常会出现页面太长的现象，当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条，用户体验相当不好，于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮，点击该按钮返回顶部，并且有一定的效果。

01

event兼容,clientX,pageX,offsetX和screenX的区别，图片移动

3.event兼容,clientX,pageX,offsetX和screenX的区别，图片移动。例 3.1：event兼容,clientX,offsetX和screenX的区别，图片移动。 clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 pageX：参照点也是浏览器内容区域的左上角，但它包括滚动条，即不会随着滚动条而变动 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。包括滚动条。 screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。马克-to-win：做实验时，可以选择四个地点，一个是窗口最左边，一个就是有字的最左边，最后一个选择窗口的最右边。这时出现滚动条，按右箭头到头，点击，你会发现区别。 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

acdsacdaddscsavfdvdfavvavdav
acdsacdaddscsavfdvdfavvavdav
acdsacdaddscsavfdvdfavvavdav
acdsacdaddscsavfdvdfavvavdav
acdsacdaddscsavfdvdfavvavdav
acdsacdaddscsavfdvdfavvavdav
acdsacdaddscsavfdvdfavvavdav
acdsacdaddscsavfdvdfavvavdav
acdsacdaddscsavfdvdfavvavdav
acdsacdaddscsavfdvdfavvavdav

<script> var car = document.getElementById("img"); function move(event) { var event = event || window.event; /*clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。马克-to-win：做实验时，可以选择三个地点，一个是窗口最左边，一个就是有字的最左边，最后一个选择窗口的最右边。 */ alert("event.clientX is "+event.clientX+"event.pageX is "+event.pageX+"event.offsetX is "+event.offsetX+"event.screenX is "+event.screenX); car.style.left = event.clientX ; car.style.top = event.clientY; } document.onmousedown=move; </script>

04

小程序开发基础-scroll-view 可滚动视图区域

查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/

04

摸鱼的新发现，滚动条无限滚动

上班摸鱼,下班摸鱼,一直摸一直爽。在一次调试的过程中,我按下了F12刚好是掘金的页面，然后把代码输入到控制台之后，顺手滚动了几下右侧的滚动条，发现个问题如下图所示:

04

滚动条三要素scrollTop clientHeight scrollHeight

插件 https://github.com/inuyaksa/jquery.nicescroll

04

你会用到的 15个前端小知识

元素宽高设置为 0，通过 border 属性来设置，让其它三个方向的 border 颜色为透明或者和背景色保持一致，剩余一条 border 的颜色设置为需要的颜色。

01

导航栏滚动吸顶并自动高亮和点击跳转锚点

在阿里云的云市场页面上有一个效果，就是api导航栏当滚动条滚动到其所在位置时，自动吸顶，当滚动到下方所在导航栏指定的介绍时，自动高亮其导航栏。点击时则会滑动至其内容所在位置。具体效果为下图样式。

05

vue2笔记1基本用法整理

绑定字符串：名字不确定绑定数组：样式个数和名字都不确定绑定对象：个数和名字确定，但不确定用不用

02

膜拜！用最少的代码却实现了最牛逼的滚动动画！

ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。

02

膜拜！用最少的代码却实现了最牛逼的滚动动画！

ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。

00

30+ 个工作中常用到的前端小知识（干货）

一个简单的原因就是，js在设计之初只是进行一些简单的表单校验，这完全不需要多线程，单线程完全可以胜任这项工作。即便后来前端发展迅速，承载的能力越来越多，也没有发展到非多线程不可的程度。

03

swiper轮播图的使用

<swiper style="height:300px" :options="swiperOption" ref="mySwiper" id="swiper_container"> <swiper-slide class="box" v-for="(item,inde

03

swiper轮播图的使用(转载)

<swiper style="height:300px" :options="swiperOption" ref="mySwiper" id="swiper_container"> <swiper-slide class="box" v-for="(item,inde

00

「前端进阶」高性能渲染十万条数据(虚拟列表)

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、收入等)，此时对于用户的持仓列表一般是不能分页的。

07

从 antDesign 来窥探移动端“滚动穿透”行为

上述是 MDN 中对于 overscroll-behavior 属性的描述，上述这段话恰恰描述了为什么会发生"滚动穿透"现象。

02

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

web前端 —— 移动端知识的一些总结个人在移动端的一些总结归纳，有新的知识点会一直更新一.css部分 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面做了缩小优化，所以字体等都相应

04

JS - 兼容到ie7的自定义样式的滚动条封装

demo： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author"

04

JQuery第三节

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

03

如何渲染几万条数据并不卡住界面

现在项目中列表页都会做成分页的形式，但是仍然存在一些场景：后端返回所有数据（可能成千上万条），前端渲染。下面提供几种解决思路。

01

dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css，从而将本插件到来之前，打散、嵌套在 js 中的修改样式的代码剥离出来。比如你要做元素跟随鼠标移动，或者根据滚动条位置的变化而触发一些效果，原本你要写 js 去绑定滚动事件，然后计算偏移量，然后更新元素 css，使用 dynamic-css，你只要根据语法去写好 css 表达式就可以了。对于一些原本需要复杂的 js 判断的动态 css，用 dynamic css 表达式几行代码搞定。

02

用canvas画了个table，手写滚动条

在之前业务有幸接触过复杂的大数据业务渲染，所用的table居然是用canvas以及虚拟列表的方式实现，也有看到飞书的统计信息表就是canvas绘制，一直没太明白为什么要用canvas去做，今天记录一下如何用canvas绘制一个table的简易版，希望看完在项目中能带来一些思考和帮助。

02

VUE指令：无限上拉加载更多插件

无限上拉加载更多，在很多场景都有使用，无论是PC还是移动端，尤其是移动端，都应用非常广泛，比如掘金、头条等。都知道，无论是下拉，亦或是上拉，都是基于滚动条的位置而言的，如果滚动条触底，表示需要加载更多了，而触顶，再次下拉，表示刷新。看个简单的代码示例：

01

iframe出现双层滚动条解决方案

在开发中出现一个iframe双滚动条问题，查了很多资料，网上的解决方案是定义iframe的onload事件，加载时重新加载高度，但是由于项目中页面渲染完成后，点击按钮动态生成数据，这时候上面的方案就不可行了。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭