आवेदन करने के बाद एक div के अंदर स्क्रॉल नहीं कर सकता है- सफारी में वेबबिट-ट्रांसफॉर्म

Question

मैं एक स्लाइड मेनू बना रहा हूं।

मेनू लंबा है और मुझे इसके अंदर स्क्रॉल करने में सक्षम होना चाहिए, इसलिए मैंने ओवरफ्लो-वाई सेट किया है: उस पर स्क्रॉल करें।

मैं संक्रमण संपत्ति के रूप में -webkit-transform (और अन्य ब्राउज़रों पर भिन्नता) का उपयोग कर रहा हूं।

अब मैं div के शीर्ष पर स्क्रॉलव्हील का उपयोग करके div के अंदर स्क्रॉल नहीं कर सकता, जब div के शीर्ष पर पूरे पृष्ठ स्क्रॉल करेंगे।

यदि मैं मेनू के व्यवहार को बदलता हूं और सही संपत्ति को स्थानांतरित करता हूं (मेनू को दाएं: -320px पर सेट करता है और इसे सही पर वापस एनिमेट करता है: 0), स्क्रॉल काम करता है।

यह बग केवल सफारी में खुश है, यह क्रोम और अन्य ब्राउज़रों में ठीक काम करता है। आईओएस पर भी काम करता है।

कोई भी कामकाज जानता है? किसी ने पहले इस मुद्दे का अनुभव किया? मुझे इस पर कोई जानकारी नहीं मिल रही है। धन्यवाद।

Answer 1

मुझे transition और overflow: auto के बजाय के बजाय animation का उपयोग करने के अंतर के साथ एक ही समस्या थी।

यह मेरे लिए समस्या का समाधान हो (el डोम तत्व है जो करने के लिए एनीमेशन लागू किया जाता है):

function fixSafariScrolling(event) { 
    event.target.style.overflowY = 'hidden'; 
    setTimeout(function() { event.target.style.overflowY = 'auto'; }); 
} 

el.addEventListener('webkitAnimationEnd', fixSafariScrolling);