js 判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。

最新推荐文章于 2024-03-18 09:42:52 发布

weixin_30516243

最新推荐文章于 2024-03-18 09:42:52 发布

阅读量1k

点赞数

文章标签： java 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/yuxiaole/p/9302392.html

版权

前言：最近工作中，有这样一个场景，判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。为了以后再次遇到，所以记录下来，并分享。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9302392.html

网站地址：我的个人vue+element ui demo网站

github地址：yuleGH github (喜欢记得star哦)

话不多说，直接上 Demo 吧

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<html>

<head>
    <title>测试</title>
    <style>
        #div1{
            border: 1px solid;
            height: 200px;
            width: 200px;
            padding: 10px;
            margin: 200px;

            /*浮动*/
            overflow: auto;
        }
        #fixDiv{
            background-color: antiquewhite;
        }
    </style>
</head>
<body>

<div id="div1">
    <div>sdf</div>
    <div>地方</div>
    <div>水电费</div>
    <div>史蒂夫</div>
    <div>鬼地方个</div>
    <div>史3玩儿</div>
    <div>史3水电费玩儿</div>
    <div>212</div>
    <div>435 </div>
    <div>电饭锅</div>
    <div>规划局</div>
    <div>好久</div>
    <div>水电费</div>
    <div>史3水电费玩儿</div>
    <div>34</div>
    <div>的</div>
    <div>45</div>
    <div>sdf</div>
    <div>地方</div>
    <div>水电费</div>
    <div>史蒂夫</div>
    <div id="fixDiv">固定在可视区域上方</div>
    <div>史3玩儿</div>
    <div>史3水电费玩儿</div>
    <div>212</div>
    <div>435 </div>
    <div>电饭锅</div>
    <div>规划局</div>
    <div>好久</div>
    <div>水电费</div>
    <div>史3水电费玩儿</div>
    <div>34</div>
    <div>的</div>
    <div>45</div>
</div>

<button id="btn">点击到固定元素处</button>

<script type="text/javascript" src="${ctx}/static/common/js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

    var $div = $("#div1");
    //262 222 220 200
    console.log($div.outerHeight(true), $div.outerHeight(false), $div.outerHeight(), $div.innerHeight(), $div.height());

    var div = $div[0];
    //220 222 734 20 0
    console.log(div.clientHeight, div.offsetHeight, div.scrollHeight, div.offsetTop, div.scrollTop);

    $("#btn").click(function(){
        //判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。
        var fixDiv = $("#fixDiv");
        var divs = $("#div1").find("div");
        var fixDivIndex = divs.index(fixDiv);
        var oneDivHeight = fixDiv.height();
        var fixDivScrollTop = fixDivIndex * oneDivHeight;//这个元素正好在可视区域上方的scrollTop值
        var divCurrentScrollTop = $("#div1").scrollTop();
        if(fixDivScrollTop > divCurrentScrollTop > fixDivScrollTop - $("#div1").height()){
            //在可视区域内
        }else if(fixDivScrollTop < divCurrentScrollTop || divCurrentScrollTop < fixDivScrollTop - $("#div1").height()){
            $("#div1").scrollTop(fixDivScrollTop);
        }
    });
</script>

</body>

</html>

解释一下，一个元素当前所在的scrollTop值如果在最小和最大之间则说明该元素在可视范围之内。

转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9302392.html

转载于:https://www.cnblogs.com/yuxiaole/p/9302392.html

weixin_30516243

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js 判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。

前言：最近工作中，有这样一个场景，判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。为了以后再次遇到，所以记录下来，并分享。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9302392.html网站地址：我的个人vue+element ui demo网站github地址：yuleGH github(喜欢记得star哦)...
复制链接

扫一扫