变换比例时如何检查元素是否在视口外

Question

我知道getBoundingClientRect()在视图中有边界，但我发现如果视图有变换比例，这将不起作用。您的任何解决方案。

var bounding = elem.getBoundingClientRect();

// Check if it's out of the viewport on each side

var out = {};

out.top = bounding.top >= 0;

out.left = bounding.left >= 0;

out.bottom = (bounding.bottom) > ((window.innerHeight) || (document.documentElement.clientHeight));

out.right = (bounding.right) > ((window.innerWidth) || (document.documentElement.clientWidth));

Answer 1

请拖动方块，它得到了变换比例和旋转。$.fn.isOnScreen = function(partial){&nbsp; &nbsp; //let's be sure we're checking only one element (in case function is called on set)&nbsp; &nbsp; var t = $(this).first();&nbsp; &nbsp; //we're using getBoundingClientRect to get position of element relative to viewport&nbsp; &nbsp; //so we dont need to care about scroll position&nbsp; &nbsp; var box = t[0].getBoundingClientRect();&nbsp; &nbsp; //let's save window size&nbsp; &nbsp; var win = {&nbsp; &nbsp; &nbsp; &nbsp; h : $(window).height(),&nbsp; &nbsp; &nbsp; &nbsp; w : $(window).width()&nbsp; &nbsp; };&nbsp; &nbsp; //now we check against edges of element&nbsp; &nbsp; //firstly we check one axis&nbsp; &nbsp; //for example we check if left edge of element is between left and right edge of scree (still might be above/below)&nbsp; &nbsp; var topEdgeInRange = box.top >= 0 && box.top <= win.h;&nbsp; &nbsp; var bottomEdgeInRange = box.bottom >= 0 && box.bottom <= win.h;&nbsp; &nbsp; var leftEdgeInRange = box.left >= 0 && box.left <= win.w;&nbsp; &nbsp; var rightEdgeInRange = box.right >= 0 && box.right <= win.w;&nbsp; &nbsp; //here we check if element is bigger then window and 'covers' the screen in given axis&nbsp; &nbsp; var coverScreenHorizontally = box.left <= 0 && box.right >= win.w;&nbsp; &nbsp; var coverScreenVertically = box.top <= 0 && box.bottom >= win.h;&nbsp; &nbsp; //now we check 2nd axis&nbsp; &nbsp; var topEdgeInScreen = topEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally );&nbsp; &nbsp; var bottomEdgeInScreen = bottomEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally );&nbsp; &nbsp; var leftEdgeInScreen = leftEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically );&nbsp; &nbsp; var rightEdgeInScreen = rightEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically );&nbsp; &nbsp; //now knowing presence of each edge on screen, we check if element is partially or entirely present on screen&nbsp; &nbsp; var isPartiallyOnScreen = topEdgeInScreen || bottomEdgeInScreen || leftEdgeInScreen || rightEdgeInScreen;&nbsp; &nbsp; var isEntirelyOnScreen = topEdgeInScreen && bottomEdgeInScreen && leftEdgeInScreen && rightEdgeInScreen;&nbsp; &nbsp; return partial ? isPartiallyOnScreen : isEntirelyOnScreen;};$.expr.filters.onscreen = function(elem) {&nbsp; return $(elem).isOnScreen(true);};$.expr.filters.entireonscreen = function(elem) {&nbsp; return $(elem).isOnScreen(true);};$(function(){$('#circle1').draggable({&nbsp; &nbsp;drag: function() {if ($("#circle1").isOnScreen()) $('.indicator').html('yes its on screen');else $('.indicator').html('its off screen');&nbsp; &nbsp; &nbsp; },});});.circle{width: 50px;height: 50px;background-color: red;top: 50%;left: 50%;}.circle.big{transform: scale(2,2) rotate(20deg);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script><script&nbsp; src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"&nbsp; integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="&nbsp; crossorigin="anonymous"></script>&nbsp;&nbsp;<div class="circle big" id="circle1">drag me</div><div class="indicator"></div>Press to enlarge