मुझे पता है कि 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));
1
Joe 24 अक्टूबर 2019, 12:04

1 उत्तर

सबसे बढ़िया उत्तर

कृपया वर्ग को खींचें, इसे ट्रांसफॉर्म स्केल मिला और चालू करें।

$.fn.isOnScreen = function(partial){

    //let's be sure we're checking only one element (in case function is called on set)
    var t = $(this).first();

    //we're using getBoundingClientRect to get position of element relative to viewport
    //so we dont need to care about scroll position
    var box = t[0].getBoundingClientRect();

    //let's save window size
    var win = {
        h : $(window).height(),
        w : $(window).width()
    };

    //now we check against edges of element

    //firstly we check one axis
    //for example we check if left edge of element is between left and right edge of scree (still might be above/below)
    var topEdgeInRange = box.top >= 0 && box.top <= win.h;
    var bottomEdgeInRange = box.bottom >= 0 && box.bottom <= win.h;

    var leftEdgeInRange = box.left >= 0 && box.left <= win.w;
    var rightEdgeInRange = box.right >= 0 && box.right <= win.w;


    //here we check if element is bigger then window and 'covers' the screen in given axis
    var coverScreenHorizontally = box.left <= 0 && box.right >= win.w;
    var coverScreenVertically = box.top <= 0 && box.bottom >= win.h;

    //now we check 2nd axis
    var topEdgeInScreen = topEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally );
    var bottomEdgeInScreen = bottomEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally );

    var leftEdgeInScreen = leftEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically );
    var rightEdgeInScreen = rightEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically );

    //now knowing presence of each edge on screen, we check if element is partially or entirely present on screen
    var isPartiallyOnScreen = topEdgeInScreen || bottomEdgeInScreen || leftEdgeInScreen || rightEdgeInScreen;
    var isEntirelyOnScreen = topEdgeInScreen && bottomEdgeInScreen && leftEdgeInScreen && rightEdgeInScreen;

    return partial ? isPartiallyOnScreen : isEntirelyOnScreen;

};

$.expr.filters.onscreen = function(elem) {
  return $(elem).isOnScreen(true);
};

$.expr.filters.entireonscreen = function(elem) {
  return $(elem).isOnScreen(true);
};

$(function(){

$('#circle1').draggable({   drag: function() {
if ($("#circle1").isOnScreen()) $('.indicator').html('yes its on screen');
else $('.indicator').html('its off screen');
      },});


});
.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
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
  
<div class="circle big" id="circle1">drag me</div>

<div class="indicator"></div>
Press to enlarge
0
Wils 24 अक्टूबर 2019, 09:30