☰

Greasy Fork is available in English.

jQuery-viewport-checker

jQuery-viewport-checker see description link

بۇ قوليازمىنى بىۋاسىتە قاچىلاشقا بولمايدۇ. بۇ باشقا قوليازمىلارنىڭ ئىشلىتىشى ئۈچۈن تەمىنلەنگەن ئامبار بولۇپ، ئىشلىتىش ئۈچۈن مېتا كۆرسەتمىسىگە قىستۇرىدىغان كود: // @require https://update.greatest.deepsurf.us/scripts/7702/33495/jQuery-viewport-checker.js 

  1. /*
  2.     Version 1.7.4
  3.     The MIT License (MIT)
  4.  
  5.     Copyright (c) 2014 Dirk Groenen
  6.  
  7.     Permission is hereby granted, free of charge, to any person obtaining a copy of
  8.     this software and associated documentation files (the "Software"), to deal in
  9.     the Software without restriction, including without limitation the rights to
  10.     use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
  11.     the Software, and to permit persons to whom the Software is furnished to do so,
  12.     subject to the following conditions:
  13.  
  14.     The above copyright notice and this permission notice shall be included in all
  15.     copies or substantial portions of the Software.
  16. */
  17.  
  18. (function($){
  19.     $.fn.viewportChecker = function(useroptions){
  20.         // Define options and extend with user
  21.         var options = {
  22.             classToAdd: 'visible',
  23.             classToRemove : 'invisible',
  24.             offset: 100,
  25.             repeat: false,
  26.             invertBottomOffset: true,
  27.             callbackFunction: function(elem, action){},
  28.             scrollHorizontal: false
  29.         };
  30.         $.extend(options, useroptions);
  31.  
  32.         // Cache the given element and height of the browser
  33.         var $elem = this,
  34.             windowSize = {height: $(window).height(), width: $(window).width()},
  35.             scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  36.  
  37.         /*
  38.          * Main method that checks the elements and adds or removes the class(es)
  39.          */
  40.         this.checkElements = function(){
  41.             var viewportStart, viewportEnd;
  42.  
  43.             // Set some vars to check with
  44.             if(!options.scrollHorizontal){
  45.                 viewportStart = $(scrollElem).scrollTop();
  46.                 viewportEnd = (viewportStart + windowSize.height);
  47.             }
  48.             else{
  49.                 viewportStart = $(scrollElem).scrollLeft();
  50.                 viewportEnd = (viewportStart + windowSize.width);
  51.             }
  52.  
  53.             // Loop through all given dom elements
  54.             $elem.each(function(){
  55.                 var $obj = $(this),
  56.                     objOptions = {},
  57.                     attrOptions = {};
  58.  
  59.                 //  Get any individual attribution data
  60.                 if ($obj.data('vp-add-class'))
  61.                     attrOptions.classToAdd = $obj.data('vp-add-class');
  62.                 if ($obj.data('vp-remove-class'))
  63.                     attrOptions.classToRemove = $obj.data('vp-remove-class');
  64.                 if ($obj.data('vp-offset'))
  65.                     attrOptions.offset = $obj.data('vp-offset');
  66.                 if ($obj.data('vp-repeat'))
  67.                     attrOptions.repeat = $obj.data('vp-repeat');
  68.                 if ($obj.data('vp-scrollHorizontal'))
  69.                     attrOptions.scrollHorizontal = $obj.data('vp-scrollHorizontal');
  70.                 if ($obj.data('vp-invertBottomOffset'))
  71.                     attrOptions.scrollHorizontal = $obj.data('vp-invertBottomOffset');
  72.  
  73.                 // Extend objOptions with data attributes and default options
  74.                 $.extend(objOptions, options);
  75.                 $.extend(objOptions, attrOptions);
  76.  
  77.                 // If class already exists; quit
  78.                 if ($obj.hasClass(objOptions.classToAdd) && !objOptions.repeat){
  79.                     return;
  80.                 }
  81.  
  82.                 // define the top position of the element and include the offset which makes is appear earlier or later
  83.                 var elemStart = (!objOptions.scrollHorizontal) ? Math.round( $obj.offset().top ) + objOptions.offset : Math.round( $obj.offset().left ) + objOptions.offset,
  84.                     elemEnd = (!objOptions.scrollHorizontal) ? elemStart + $obj.height() : elemStart + $obj.width();
  85.  
  86.                 if(objOptions.invertBottomOffset)
  87.                 	elemEnd -= (objOptions.offset * 2);
  88.  
  89.                 // Add class if in viewport
  90.                 if ((elemStart < viewportEnd) && (elemEnd > viewportStart)){
  91.  
  92.                     // remove class
  93.                     $obj.removeClass(objOptions.classToRemove);
  94.  
  95.                     $obj.addClass(objOptions.classToAdd);
  96.  
  97.                     // Do the callback function. Callback wil send the jQuery object as parameter
  98.                     objOptions.callbackFunction($obj, "add");
  99.  
  100.                 // Remove class if not in viewport and repeat is true
  101.                 } else if ($obj.hasClass(objOptions.classToAdd) && (objOptions.repeat)){
  102.                     $obj.removeClass(objOptions.classToAdd);
  103.  
  104.                     // Do the callback function.
  105.                     objOptions.callbackFunction($obj, "remove");
  106.                 }
  107.             });
  108.  
  109.         };
  110.  
  111.         // Run checkelements on load and scroll
  112.         $(window).bind("load scroll touchmove MSPointerMove", this.checkElements);
  113.  
  114.         // On resize change the height var
  115.         $(window).resize(function(e){
  116.             windowSize = {height: $(window).height(), width: $(window).width()},
  117.             $elem.checkElements();
  118.         });
  119.  
  120.         // trigger inital check if elements already visible
  121.         this.checkElements();
  122.  
  123.         // Default jquery plugin behaviour
  124.         return this;
  125.     };
  126. })(jQuery);