मैं वर्तमान में कुछ कस्टम कर्सर को लागू करने की कोशिश कर रहा हूं - एक div जो कर्सर के साथ चलता है। ऐसा करने के लिए, मैं निम्नलिखित कोड का उपयोग करता हूं:

document.addEventListener('mousemove', this.handleMouseMove);

handleMouseMove = (event) => {
    const y = event.pageY;
    const x = event.pageX;

    const ref = document.querySelector('.follow-cursor');
    ref.style.left = x + 'px';
    ref.style.top = y + 'px';
};

यह ठीक काम करता है, लेकिन एक और समस्या है: स्क्रॉलिंग। अब तक, div स्क्रॉल पर नहीं चल रहा है और इसलिए स्क्रॉल पर कर्सर का अनुसरण नहीं कर रहा है। मैं उसे कैसे बदल सकता हूं? संदर्भ: यह वेबसाइट

0
Tim 23 मार्च 2020, 00:59

1 उत्तर

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

मुझे नहीं लगता कि जिस साइट से आपने लिंक किया है वह ऐसा करती है, लेकिन यह काम करती है।

handleMouseMove = (event) => {
    const y = event.pageY;
    const x = event.pageX;
    const ref = document.querySelector('.follow-cursor')
    const scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
    const scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    ref.style.left =  x - scrollLeft + 'px';
    ref.style.top = y - scrollTop + 'px';
};

यदि आप अपने .follow-कर्सर पर शैली position: fixed लागू करते हैं तो उसे काम करना चाहिए।

उदाहरण: https://jsfiddle.net/bf5wy9v3/

0
NickSlash 22 मार्च 2020, 22:42