如上图所示，假设橙色表示滚动条，蓝色框表示 div 区域，黑色区域表示看不到的文档部分，高度说明如下：
B：表示 div 元素高度，div 的高度不会随着内容的编号而编号，与有没有出现滚动条无关，只与自己的 height 属性有关
A：表示 div 内文档高度，当没有出现滚动条时，A文档高度等于 div 高度（A = B）；随着内容的增加出现滚动条时，A 的值会增加
C：滚动条相对 div 元素顶部（top）边缘的距离，与上面隐藏的文档无关。
A >= B + C；// 图1 中 C = 0; 图2 中 A > B + C ；图3 中 A = B + C;
div 文档总高度（A）获取方式如下
：
var scrollHeight = document.getElementById("#div1").scrollHeight; //scrollHeight 必须 DOM 操作,JQuery 没有对应方法
var scrollHeight = $("#div1")[0].scrollHeight //可以使用 JQuery 先选择元素，然后 [0] 转为 DOM 对象
div 元素高度（B）获取方式如下
：
var height=$("#dvi1").height() // JQuery 操作方式
div 滚动条相对 div 元素顶部（top）边缘的高度
：
var scrollTop = $("#div1").scrollTop(); // JQuery 获取方式
var scrollTop = document.getElementById("div1").scrollTop; // DOM 方式
回到顶/底部
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Div 距离汇总</title>
<style type="text/css">
.test {
width: 500px;
height: 300px;
background-color: #444444;
overflow: auto;
color: white;
margin-top: 80px;
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
* 回到顶部
$("#top").click(function () {
$(".test").scrollTop(0);
* scrollTop：div 滚动条距离 div 上边缘的距离
* scrollHeight：div 内文档总高度（包括被隐藏的），当没有出现滚动条时，scrollHeight = height
* height：div 元素的高度，只与自己 height 属性有关，与滚动条无关
let scrollTop = $("#inner").scrollTop();
let scrollHeight = $("#inner")[0].scrollHeight;
let height = $("#inner").height();
console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight);
* 调到底部
$("#bottom").click(function () {
let scrollHeight = document.getElementById("inner").scrollHeight;
$(".test").scrollTop(scrollHeight);
let scrollTop = document.getElementById("inner").scrollTop;
let height = $("#inner").height();
scrollHeight = document.getElementById("inner").scrollHeight;
console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight);
* 运动到中间
$("#center").click(function () {
let scrollHeight = document.getElementById("inner").scrollHeight;
let middle = scrollHeight / 2;
$(".test").scrollTop(middle);
let scrollTop = $("#inner").scrollTop();
let height = $("#inner").height();
scrollHeight = document.getElementById("inner").scrollHeight;
console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight, "middle=" + middle);
</script>
</head>
<div class="test" id="inner">
<h1>China 1</h1>
<h1>USA 1</h1>
<h1>UK 1</h1>
<h1>China 2</h1>
<h1>USA 2</h1>
<h1>UK 2</h1>
<h1>China 3</h1>
<h1>USA 3</h1>
<h1>UK 3</h1>
<button id="top">回到顶部</button>
<button id="bottom">跳到底部</button>
<button id="center">运动中间</button>
</body>
</html>
消息区自动滚动到底部
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Div 距离汇总</title>
<style type="text/css">
.test {
width: 300px;
height: 100px;
background-color: #444444;
overflow: auto;
color: white;
margin-top: 80px;
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
* 发送消息时，滚动条自动移动在底部
$("#send").click(function () {
let message = $("textarea").val();
$("#inner").append("<span>" + message + "</span><br>");
* scrollHeight：div 内文档总高度（包括被隐藏的），当没有出现滚动条时，scrollHeight = height
* height：div 元素的高度，只与自己 height 属性有关，与滚动条无关
let scrollHeight = $("#inner")[0].scrollHeight;
let height = $("#inner").height();
* 滚动条距离元素顶部的高度 + div 元素的高度 = 文档的高度
* 这样滚动条刚好在底部
$("#inner").scrollTop(scrollHeight - height);
</script>
</head>
<div class="test" id="inner">
<div class="test">
<textarea style="width: 100%;height: 100%;background-color: white"></textarea>
<button id="send">发送</button>
</body>
</html>
目录示例图说明编码示例回到顶/底部消息区自动滚动到底部示例图说明 如上图所示，假设橙色表示滚动条，蓝色框表示 div 区域，黑色区域表示看不到的文档部分，高度说明如下：B：表示 div 元素高度，div 的高度不会随着内容的编号而编号，与有没有出现滚动条无关，只与自己的 height 属性有关A：表示 div 内文档高度，当没有出现滚动条时，A文档高度...
本文实例讲述了vue使用@scroll监听
滚动
事件时，@scroll无效问题的解决方法。分享给大家供大家参考，具体如下：
在网上看了一下vue
中
监听
滚动
条
滚动
事件，清一色的使用document.addEventListener('scroll',function(){})
我是在做
滚动
条滑到底部时，自动加载更多的时候有这个需求。
我认为使用document.addEventListener会破坏vue的统一性，对我这种有轻微代码强迫症的人来说，让我感觉很不爽。而且这种做法，会让你更加难以判断是否滑动到底部了，特别是当你并不是整页
滚动
，而是页面
中
拥有一个fixed固定的头部时。
在.vue的组件
在使用vue进行项目开发的时候，有时会需要我们监听
div
是否发生
滚动
，来改变dom样式，接下来让我们就使用最直接的方式进行监听
1、给
div
绑定
滚动
事件
<
div
class="task-operation-item-list" @scroll="scrollEvent" ref="scroll
Div
">
</
div
>
2、创建监听方法在methods
中
创建如下方法
scrollEvent () {
console.log(this.$refs.scro
由于如果绑定在window上，那么路由切换之后，事件依然会被触发，所以在
div
元素上绑定
(如果绑定在window上，那么在导航守卫里，路由离开的时候解绑就行了，一样可以实现功能）
在元素标签上直接绑定 scroll 事件
<
div
class="home-test" @scroll="scrol...
<
div
class="activity-wrap">
<
div
class="activity-list" @scroll="loadMore">
<
div
class="activity-item" v-for="item in activityList">
<
div
class="name">
<
div
>{{item.name.
vue @scroll 监听
滚动
条事件
为啥要使用 @scroll 监听
滚动
条事件 没用在vue.js 开发前 我们监听
滚动
条事件都是在window挂监听事件 例如:window.onscroll = function ,
不是说vue.js不能这样写, 只是这样写不好 这些必须在这个页面销毁时 清除这个事件 不然的话就会在全局监听,用原生 window监听可能是大家最熟悉的方法 .可vue.js 给我提供了@scroll 这个方法用来处理
滚动
条监听它不香吗???
好了不多BB直接将上干货
使用@scrol
2、在配置@scroll同时在mounted加上一下方法
mounted(){
window.addEventListener('scroll',this.loadMore,true)
3、loadMore方法可以自己定义
loadMore: function (e) {
console.log(e)
4、通过以上可以顺利监听
滚动
条监听事件
一共有两种方法，但是不论那种方法，
一定要给监听的
div
设置overflow-y: scroll;属性！
一定要给监听的
div
设置overflow-y: scroll;属性！
一定要给监听的
div
设置overflow-y: scroll;属性！
不然监听不到滑动到屏幕上方的
高度
！
<
div
class="person" ref="personDom" @scroll="handlerScroll($event)" ></
div
>
方法一：给指定
div
这是监听事件
mounted(
在方法
中
定义监听
滚动
执行的方法：
scrollToTop() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollT
<
div
class="flex-wrapper" ref="scrollmain" @touchstart='touchstart' @touchmove='touchmove' @touchend='touchend'>
2.【Method】
touchmove(e){
var scollTop=0...
高德地图的 marker 不支持
滚动
条。如果您希望在 marker
中
显示大
量
文本信息，可以考虑使用自定义标注（CustomOverlay）来实现。自定义标注可以自定义 HTML 内容，可以包含
滚动
条等交互元素。
以下是一个简单的示例，展示如何创建一个自定义标注来显示文本内容：
```javascript
// 创建一个自定义标注
var myOverlay = new AMap.CustomOverlay({
content: '<
div
style="max-height: 200px; overflow-y: auto;">这里是大
量
文本内容...</
div
>',
position: [lng, lat],
offset: new AMap.Pixel(-100, -100) // 自定义
偏移
量
// 将标注添加到地图上
myOverlay.setMap(map);
在上面的示例
中
，我们创建了一个自定义标注，将 HTML 内容设置为一个带有
滚动
条的
div
元素。您可以根据自己的需要自定义标注的样式和内容。
Oracle PL/SQL 类型(Type)：索引表、嵌套表、变长数组、pipelined 管道、DBMS_UTILITY.comma_to_table & table_to_comma
FFmpeg 音视频开发工具
Python 3.11.4 安装快速使用
