मैं इस कोड का उपयोग यह जांचने के लिए करता हूं कि उपयोगकर्ता ने नीचे कोड तक स्क्रॉल किया है या नहीं, लेकिन यह Google क्रोम पर काम नहीं करता है लेकिन यह माइक्रोसॉफ्ट एज पर सफलतापूर्वक काम करता है।

Google क्रोम में जब मैं नीचे स्क्रॉल करता हूं और फिर से ऊपर स्क्रॉल करता हूं तो यह काम करता है लेकिन मुझे नहीं पता कि क्यों।

यहां वह कोड है जिसका मैं उपयोग कर रहा हूं।

<script>

 $(window).scroll(function() {   
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});
</script>
<!decotype html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
  </head>
   <body>
       
       
 <div style="height: 4000px">Scroll down!</div>
</body> 
</html>
1
habib 17 जुलाई 2018, 20:16
2
 – 
Vignesh Raja
17 जुलाई 2018, 20:26

2 जवाब

समस्या यह है कि जब आप मार्जिन (ऊपर या नीचे) का उपयोग करते हैं तो आपको इसके बजाय .outerHeight(true) का उपयोग करना चाहिए .height का या इस मामले में ऊंचाई और मार्जिन का योग। यदि आपके पास पैडिंग है तो वही समस्या है।

$(window).scroll(function(){
   if($(window).scrollTop()+$(window).height()>$("h3").outerHeight( true ) ){

       alert("bottom!")

   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h3 style="margin-top:2000px">hello world</h3>
</body>
<html>

के बारे में .outerHeight()

मिलान किए गए तत्वों के सेट में पहले तत्व के लिए वर्तमान गणना की गई बाहरी ऊंचाई (पैडिंग, बॉर्डर और वैकल्पिक रूप से मार्जिन सहित) प्राप्त करें या प्रत्येक मिलान किए गए तत्व की बाहरी ऊंचाई निर्धारित करें

.

0
Emeeus 17 जुलाई 2018, 21:58

मान लें कि आप कुछ डेटा लोड करने के लिए एक div का उपयोग करते हैं... (#load_data के कारण)

आपको स्क्रॉल पर 3 मान प्राप्त करने की आवश्यकता है:

  1. स्क्रॉल की गई स्थिति
  2. div ऊंचाई
  3. div स्क्रॉल करने योग्य ऊंचाई

यह आखिरी वाला तत्व गुण है। em>असली तत्व ऊंचाई, इसके अतिप्रवाह सहित।

इसके अतिरिक्त, आपको यह परिभाषित करने की आवश्यकता है कि नीचे निकट क्या है... पिक्सेल में।

तो... नीचे दिए गए उदाहरण में, मैं एक अजाक्स अनुरोध नकली कर रहा हूं। बस वह कोड खोजें जो आपको चाहिए

$(document).ready(function() {

  // Function to replace Ajax in this demo.
  function createContent(n){
    var fakeContent = "";
    for(i=0;i<n;i++){
      fakeContent += i+"<br>";
    }
    $("#load_data").append(fakeContent);
  }
  // Simulate initial content...
  createContent(100);

  // The code you need
  var near = 20; // pixels buffer yet to be scrolled when the Ajax triggers.
  
  $("#load_data").on("scroll",function(){
    if( $(this).scrollTop() + $(this).height() + near > this.scrollHeight ){
      console.log("Faking Ajax...");
      createContent(50);
    }
  });

});  // END ready
#load_data{
  height: 150px;
  width: 300px;
  border: 1px solid grey;
  overflow-y:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

There is 100 (0-99) lines on load.<br>
<div id="load_data"></div>
0
Louys Patrice Bessette 17 जुलाई 2018, 21:22