2010-08-19 12 views
17

मैं खिड़की से संबंधित सटीक माउस स्थिति प्राप्त करने की कोशिश कर रहा हूं।jquery माउस स्थिति सापेक्ष विंडो

यहाँ मेरी समस्या नहीं है ...

  • document.height = 1600 (वास्तविक दस्तावेज़ का आकार)
  • window.height = 400 (देखा जा सकता है)

मैं करने के लिए माउस सापेक्ष स्थिति यह पता लगाने की जरूरत है खिड़की, दस्तावेज़ के लिए नहीं जो पेजवाई विशेषता प्रदान करता है।

यह एक बड़ी टूलटिप के लिए है, जो एक टेबल आइटम के लिए मॉसओवर पर पॉप-अप हो जाता है। यदि स्क्रीन के निचले हिस्से में पर्याप्त कमरा नहीं है (विंडो अधिकतम है), तो पॉइंटर के नीचे टूलटिप पॉइंटर के ऊपर प्रदर्शित होता है, अन्यथा, सूचक के नीचे। यह तब तक ठीक काम करता है जब तक कि दस्तावेज़ का आकार पेजसाइज (लंबी तालिका) से अधिक न हो।

धन्यवाद, ल्यूक

उत्तर

34

आप पृष्ठ Y से window की .scrollTop() घटाना इस तरह, विंडो में स्थिति पाने के लिए कर सकते हैं:

var top = e.pageY - $(window).scrollTop(); 

You can give it a try here, take a look at the console

+0

आप लोग बहुत ही अच्छे हैं। उसने ऐसा किया! धन्यवाद!! – user425772

+1

@lucl - आपका स्वागत है :) और एसओ में आपका स्वागत है! –

+0

ग्रेट समाधान और इतना आसान। ओपी को समाधान के रूप में चिह्नित करना चाहिए। –

0

document.body.scrollTop विशेषता के बारे में, इसमें आपके द्वारा स्क्रॉल किए गए पिक्सेल शामिल हैं। मुझे विश्वास है कि एक साधारण पेज वाई - स्क्रॉलटॉप तब पर्याप्त होना चाहिए?

4

और window.pageYOffset के बारे में क्या?

डेमो:

<html> 
<head> 
<style> 
    html,body {padding:0;margin:0} 
    #content {height:2048px;background-color:#ccc;} 
    #status {position:fixed;top:0;left:0;} 
</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    $(document).mousemove(function(e){ 
     $('#status').html(e.pageX +', '+ (e.pageY - window.pageYOffset)); 
    }); 
}) 
</script> 
<body> 
<h2 id="status">0, 0</h2> 
<div id="content"></div> 
</body> 
</html> 
0
function showCoords(evt){ 
    alert(
    "clientX value: " + evt.clientX + "\n" 
    + "clientY value: " + evt.clientY + "\n" 
); 
} 

मुझे लगता है कि यह आपके लिए क्या देख रहे है। विवरण here from Mozilla Developer में देखें।

संबंधित मुद्दे