javascript - शरीर की सामग्री पर स्क्रॉलिंग को कैसे रोकें और खुले हुए कैनवास नेविगेशन पर स्क्रोलिंग को कैसे सक्षम करें?




jquery html (2)

अच्छी तरह से आप अपने डिवि कंटेनर में जोड़ सकते हैं जब यह मेनू खोला जाता है

.container.active{
 position:fixed;
 width:100%;
}

या

.container.active{
    height:100%;
    overflow:hidden;
}

जैसा कि @ शेन रॉबर्टसन समझाते हैं

या बस उन विशेषताओं के साथ एक वर्ग जोड़ें, जो मुख्य सामग्री को स्क्रॉल करने के लिए अवरुद्ध कर देगा, जबकि साइड एनएवी खुली होती है

मैंने एक बहुत ही बुनियादी ऑफ कैनवास नेविगेशन ( http://blog.tomri.ch/super-imple-off-canvas-menu-navigation/ ) लागू किया है। मुझे एकमात्र मुद्दा यह है कि आप मेनू स्क्रॉल नहीं कर सकते, यह विशेष रूप से मोबाइल परिदृश्य मोड में समस्याग्रस्त है, जहां मेन्यू देखने योग्य स्क्रीन क्षेत्र के नीचे फैली हुई है।

मैं सोच रहा हूं कि एक रास्ता है, जब नेविगेशन मेनू खुले हो, स्क्रॉलिंग से page-wrapper डिवाइन में सामग्री को रोकने और ऑफ कैनवास नेविगेशन में स्क्रॉलिंग को सक्षम करने के लिए और, यदि संभव हो तो, एक बड़ा बदसूरत स्क्रॉलबार नहीं दिखाएगा नेविगेशन

HTML:

<nav id="menu">
    <a href="#menu" class="menu-link"></a>
    <ul>
       <span><a href="#">Title</a></span>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
       <li><a href="#">Blog</a></li>
    </ul>
</nav>

<div class="page-wrapper">
    Body Content Here
</div>

सीएसएस:

#menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 13.755em;
    right: -13.755em;
    height: 100%;
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: 0.15s ease;
    -moz-transition: 0.15s ease;
    -o-transition: 0.15s ease;
    transition: 0.15s ease;
}
    #menu.active {
        -webkit-transform: translate(-13.755em, 0px);
        -moz-transform: translate(-13.755em, 0px);
        -o-transform: translate(-13.755em, 0px);
        -ms-transform: translate(-13.755em, 0px);
        transform: translate(-13.755em, 0px);
    }
.page-wrapper {
       -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
       -o-transform: translate(0px, 0px);
       -ms-transform: translate(0px, 0px);
       transform: translate(0px, 0px);
       -webkit-transition: 0.15s ease;
       -moz-transition: 0.15s ease;
       -o-transition: 0.15s ease;
       transition: 0.15s ease;  
}
    .page-wrapper.active {
           -webkit-transform: translate(-13.725em, 0px);
           -moz-transform: translate(-13.725em, 0px);
           -o-transform: translate(-13.725em, 0px);
           -ms-transform: translate(-13.725em, 0px);
           transform: translate(-13.725em, 0px);
    }

.menu-link {
    position: absolute;
    top: 15px;
    left: -50px;
}

जावास्क्रिप्ट:

$(".menu-link").click(function(){
    $("#menu").toggleClass("active");
    $(".page-wrapper").toggleClass("active");
});

स्क्रॉल करने के लिए किसी भी ब्लॉक स्तर के तत्व को सक्षम करने के लिए इसे overflow:auto; और आपकी साइट / ऐप की height:100%; पर निर्भर करता है height:100%; । मुख्य सामग्री पर स्क्रॉल करने को अक्षम करने के लिए कुछ चीजें हैं जो आप कर सकते हैं, लेकिन आपको उनके साथ प्रयोग करना होगा। आप एनएवी पेज की 100% की चौड़ाई तक बढ़ा सकते हैं, और जिस क्षेत्र में आप सामग्री देखते हैं वह सिर्फ एक अदृश्य तत्व द्वारा कवर किया गया है, स्क्रॉलिंग को ब्लॉक करने के लिए या बस एनएवी को स्क्रॉल करते रहें आप क्लिक कर सकते हैं, शरीर पर स्क्रॉल करने को अक्षम / सक्षम भी कर सकते हैं, नोट करें कि सर्वोत्तम परिणाम overflow:hidden; लागू होते हैं overflow:hidden; html,body पर html,body , यह कुछ क्रॉस ब्राउज़र / आईओएस मुद्दों को हल करता है

आशा है कि यह आपको कुछ अंतर्दृष्टि देता है!





navigation