जावास्क्रिप्ट सक्षम overscrolling

Question

एक दूसरे के लिए एक वेबपेज के एक भाग से जाने के लिए आसान स्क्रॉलिंग एनिमेशन बना सकते हैं। आजकल, कुछ ब्राउज़र (जैसे मैक के लिए क्रोम) "overscrolling" का समर्थन करते हैं, और अक्सर स्क्रॉलिंग में overscrolling शामिल है।

तो पारंपरिक स्क्रॉलिंग एनिमेशन ओवरस्क्रॉलिंग के बिना काफी कृत्रिम दिखते हैं। परंपरागत स्क्रॉलिंग एनीमेशन बढ़ाने के लिए जावास्क्रिप्ट के साथ वेबपृष्ठ को ओवरक्रॉल करने का कोई तरीका है?

Answer 1

हाँ आप बाउंस बैक एनीमेशन बना सकते हैं।

मैं तुम्हें उछाल कहना का मतलब मान वापस https://ux.stackexchange.com/questions/13183/name-of-the-touch-ui-overscroll-feature

मैं सिर्फ एक त्वरित/गाड़ी एक का निर्माण किया।

var threshold = 400, 
    wrap = document.getElementById('wrap'), 
    wrapHeight = wrap.offsetHeight, 
    pageHeight = (wrapHeight + threshold); 

wrap.style.height = pageHeight+'px'; 

window.addEventListener('scroll', function(){ 
    var pageY = window.pageYOffset; 

    if (pageY > wrapHeight - threshold*1.5) { 
     wrap.style.height = wrapHeight+'px'; 
    } 
    if (wrap.offsetHeight === wrapHeight) { 
     if ((pageY > wrapHeight - threshold*2.5)) { 
      wrap.style.height = pageHeight+'px'; 
     } 
    } 
}); 

भी https://github.com/andrewrjones/jquery.bounceback

मेरी कोड के पीछे मूल विचार: आप पेज बड़ा एनीमेशन समायोजित करने के लिए बनाते हैं। फिर आप नीचे से स्क्रॉल करने के बाद पृष्ठ की ऊंचाई को रीसेट कर देते हैं।

वास्तव में एनीमेशन बनाने के लिए आपको जोड़ने की आवश्यकता है: #wrap { -webkit-transition: height .5s; }

Answer 2

this project है जो jQuery overscrolling प्लगइन प्रदान करता है। यह हो सकता है कि आप क्या खोज रहे हैं। प्रदर्शन on this page।