让滚动条滚动到正好显示某个节点的位置

落日映苍穹つ 2022-06-05 10:37 269阅读 0赞

在做web版聊天软件时，有一个需求：如果向上拖动滚动条到顶部，就会加载更多历史记录（微信、QQ都是如此），历史记录逐条追加到顶端，这时看到的是最后的那条历史记录，但我们需要让用户看到的应该是第一条历史记录，这就需要将滚动条滚动到历史记录的第一条。  
比如历史记录有3条，第一条发送时间是2017年11月24日18点30分30秒，第二条是18点25分，第三条是17点，因为聊天记录是按时间顺序排列的，顶端必然是第三条，但我们应该让用户首先看到的是第一条，用户再网上滑动滚动条，才依次往前看。  
那么，我们如何让滚动条准确的滚动到第一条记录呢？  
我们看jquery的offset方法：offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。  
要定位的节点距离文档的偏移 - 顶端的那个节点距离文档的偏移 = 滚动条要滚动的距离。  
所以：

1、计算滚动距离： var scrollTopPx = (′定位到的节点′).offset().top−(‘第一个节点’).offset().top; 2、滚动条滚动： (′带滚动条的容器′).scrollTop(scrollTopPx);如果想用动画效果，可以用：(‘带滚动条的容器’).animate(\{scrollTop: scrollTopPx\}, 1000); // 1000毫秒滚动到该位置

附源码，jquery.min.js请自行下载。

<!DOCTYPE html>
    <html>
    
    <head>
        <title>让滚动条滚动到正好显示某个节点的位置</title>
        <style type="text/css"> #main { width: 500px; height: 300px; margin: 0 auto; overflow-y: scroll; } h1 { color: blue; cursor: pointer; } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #FFF; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 6px; background-color: #F5F5F5; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 6px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: #A0A0A0; } </style>
        <script src="jquery.min.js"></script>
        <script> $(function() { $('h1').click(function() { var h1Count = $('h1').length; var h1Index = $(this).parent().index(); var nextIndex = (h1Index + 1) % h1Count; var nextH1Dom = $('h1').eq(nextIndex); scrollTopToDom($('#main'), $('h1:eq(0)'), nextH1Dom); }); function scrollTopToDom($scrollDom, $firstDom, $scrollToDom) { var topOffsetPx = $firstDom.offset().top; var domOffsetPx = $scrollToDom.offset().top; // 目标元素相对于文档偏移量 - 第一个元素相对于文档偏移量 就是滚动条要滚动的距离 var scrollTopPx = domOffsetPx - topOffsetPx; $scrollDom.animate({ // 动画方式滚动过去 scrollTop: scrollTopPx }, 1000); // $scrollDom.scrollTop(scrollTopPx); // 如果不用动画，也可以用这个进行直接定位 } }) </script>
    </head>
    
    <body>
        <div id="main">
            <ul>
                <li>
                    <h1>还买给孩子？部分儿童智能手表存隐患 成监听设备</h1>
                    <p class="content">
                        据英BBC报道，德国联邦网络局禁止在该国销售儿童智能手表。来源：BBC官网截图。 今年10月，挪威消费者理事会在报告中指出，部分儿童手表存在漏洞，比如在没有加密的情况下传输和存储数据。“这意味着陌生人使用基本的黑客技术，就能追踪儿童的行动，或者让一个孩子看起来在一个完全不同的位置。”报告称。 早在2015年，我国媒体曾曝光多个品牌的儿童智能手表存在严重安全漏洞，黑客不仅可以精准掌握手表所处的位置，还能完整获取儿童日常行走路线，窃听儿童对话及周围声音。 黑客如何攻击智能手表？ 记者了解到，儿童智能手表都有相应的手机软件(App)，用于家长注册、绑定手表，在手机App中可以设置儿童的姓名、生日等信息，也可以发送指令，比如查询位置、通话等。 那么，黑客是如何攻击智能手表的？ 西安四叶草信息技术有限公司高级安全研究员余俊峰说，手机App中设置的信息和发送的指令会传到智能手表云端服务器，云端服务器和手表之间也相互发送一些功能指令。 “正常情况下，用户A只能对自己绑定的智能手表发送信息和指令，但由于智能手表云端程序没有对用户身份和要执行的指令进行权限判断，导致用户A也可以对未绑定的其他智能手表进行操作。这就导致了越权漏洞。”他说。 关于“越权漏洞”，余俊峰解释说，比如黑客在某银行有银行卡，正常情况下只能从自己的银行卡中取钱，但黑客把银行卡号修改成别人的，从别人的银行卡上把钱取出来了，银行没有判断取款人是否有权从这个银行卡取钱，这就是越权漏洞。
                    </p>
                </li>
                <li>
                    <h1>周鸿祎：我强烈呼吁 家长有权利知道幼儿园发生的一切</h1>
                    <p class="content">
                        最近虐童事件频发，360集团创始人兼CEO周鸿祎发出呼吁: 如果你为人父母， 请采取行动，做点什么！ " 有人可能骂我这是营销，但我无所谓，之前我一直在这样说，现在我更要这么讲，就是幼儿园里面安装的视频监控，必须允许家长在手机上能随时查看自己孩子的情况。 这根本不是技术问题，包括360在内，有好几家互联网企业能提供智能摄像设备，互联网上走视频，图像足够清晰，价格也不贵。对于幼儿园，360智能摄像机是免费安装免费送的。这本质上是一个思想问题，就是总有一部分幼儿园认为这是自己的地盘，我的地盘我做主。在我的地盘上，即使你是家长，也不能染指。 我认为这种观点非常没有道理。幼儿于很多事情都是懵懂的状态，对成年人非常依赖，对成年人也有恐惧，不善于表达，这样他们就成了社会上一些变态人种实施不法行为的对象。 在互联网不发达的年代，虐待儿童、性侵儿童的事件可能更多，但因为信息传递不发达被掩盖了，最后他们长大后在心理上留下了很深的创伤。 我是两个孩子的父亲，像其他父母一样爱自己的孩子一样爱他们。我记得有个故事，说一个美国人在听到自己的儿子被性侵了，他二话不说抓起枪，就把性侵的男子给毙了。我挺佩服这样的人，但我觉得可以有更好的方法来减少校园性侵案和虐童案。 其实，是郑渊洁老师最早提醒我校园虐童案、性侵案的严重性的，也正因为我自己有两个孩子，所以我让360的产品团队在2014年开发了360儿童手表和360智能摄像机。当时，我就直言不讳地讲，这两个产品就是帮助家长保护孩子安全的。这几年我们做得很好，但坎坷也不少。因为，始终有一些幼儿和小学不允许孩子佩戴儿童手表进校园，进来就得摘下来搁到一边。对家长来说，这样的校园就成了一个不透明的暗箱，自己孩子遇到怎样的欺凌，他们可能一无所知，直到孩子出了心理问题，甚至出现了生命危险才知道真相。 这几年，我们一直在争取校园方面理解我们，也取得了一些进展。360在全国的幼儿园安装了3万多台360智能摄像机。前些天，内蒙古清水河县县长通过各种关系找到我们，希望360智能摄像机能覆盖清水河县所有的幼儿园。对幼儿园，360就是免费装免费送。我们先在北京的幼儿园把免费进行到底，然后把免费开展到全国。 我说这些，是要争取大家的支持，希望大家一起呼吁，家长有权利知道幼儿园日常发生的一切，有技术手段能保证家长实时知道幼儿园日常发生的一切。幼儿园必须要认真听取家长的意见。我觉得我们每个人不能只是痛骂生气或者逃避，我们总可以做点什么，至少一个家长随手可以用手机查看的摄像头就是一个威慑。一个可以录音可以拍摄的儿童手表也是威慑。如果你为人父母，可以为你的孩子所在的幼儿园申请免费的摄像头，或者转告你认识的其他家长，不要点赞，采取行动，做点什么。"
                    </p>
                </li>
                <li>
                    <h1>5G创新成果亮相中移动2017全球合作伙伴大会</h1>
                    <p class="content">
                        中国移动2017全球合作伙伴大会展馆展示的5G相关应用场景　索有为　摄 中新网广州11月24日电 (记者 索有为)正在广州举行的2017中国移动全球合作伙伴大会上，中国移动围绕5G基础通信，高速率、低时延能力创新应用，大连接、广覆盖能力创新应用，展示了全面推动5G研发应用的最新成果。 在5G基础通信方面，中国移动展示了全球首个基于国际统一标准的“5G新空口端到端互通”，该系统工作在3.5GHz频段、100MHz带宽，下行峰值速率可达1.3Gbps以上；基于5G预商用基站和小型化5GCPE(小型化5G数据终端)的“5G端到端系统应用”，可实时直播16路4K高清视频业务；首批国内5G高频基站功放、射频前端器件，以及业界首款5G终端射频器件模组原型产品等。
                    </p>
                </li>
            </ul>
        </div>
    </body>
    
    </html>