Div 高度、滚动条距 Div 顶部偏移量、Div 中文档总高度_div滚动高度

回到顶/底部

实现代码如下：

<!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 安装快速使用