वेब पेजों में "ओवरस्क्रॉलिंग" पर काबू पाना

मैक के लिए क्रोम में, "ओवरस्क्रॉलिंग" एक अवांछनीय प्रभाव है जो उपयोगकर्ताओं को किसी पेज को उसके सामान्य देखने के क्षेत्र से परे खींचने की अनुमति देता है, जैसा कि प्रदान की गई छवि में देखा गया है। इस समस्या का समाधान करने और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, निम्नलिखित दो तरीकों पर विचार करें:

विधि 1: ओवरस्क्रॉलिंग को प्रतिबंधित करना

यदि आप ओवरस्क्रॉलिंग को पूरी तरह से अक्षम करना चाहते हैं, तो निम्नलिखित सीएसएस कोड का उपयोग करें:

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

ओवरफ़्लो: तत्व पर छिपी हुई संपत्ति किसी भी ओवरफ़्लो सामग्री को दृश्यमान होने से रोकती है, प्रभावी रूप से पृष्ठ को उसके व्यूपोर्ट के भीतर सीमित कर देती है।

विधि 2: ओवरस्क्रॉलिंग व्यवहार को अनुकूलित करना

ओवरस्क्रॉलिंग व्यवहार को अनुकूलित और नियंत्रित करने के लिए, उपयोग करें स्पर्श-क्रिया संपत्ति:

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}

उपरोक्त कोड सामान्य स्पर्श हेरफेर की अनुमति देते हुए पाठ चयन को रोकता है, जिसमें पृष्ठ की परिभाषित ऊंचाई के भीतर स्क्रॉल करना भी शामिल है। अधिक विस्तृत नियंत्रण के लिए, आप सटीक स्पर्श-क्रिया मान निर्दिष्ट कर सकते हैं, जैसे केवल क्षैतिज स्क्रॉलिंग की अनुमति देने के लिए पैन-एक्स।