前言：最近工作中，有這樣一個場景，判斷一個元素是否在滾動的可視區域內，不在就固定到可視區域的上方。為了以后再次遇到，所以記錄下來，並分享。轉載請注明出處：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