it-swarm.com.de

Wie verhindert man das Scrollen von Textinhalten und aktiviert das Scrollen bei geöffneter Off-Canvas-Navigation?

Ich habe eine sehr einfache Off-Canvas-Navigation implementiert ( http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/ ). Das einzige Problem, das ich habe, ist, dass Sie nicht im Menü scrollen können. Dies ist besonders problematisch im mobilen Querformat-Modus, in dem sich das Menü unter dem sichtbaren Bildschirmbereich befindet.

Ich frage mich, ob es eine Möglichkeit gibt, bei geöffnetem Navigationsmenü das Scrollen des Inhalts innerhalb des Bereichs page-wrapper zu verhindern, das Scrollen in der Off-Canvas-Navigation zu aktivieren und wenn möglich keine große hässliche Bildlaufleiste in der Navigation anzuzeigen .

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>

CSS:

#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;
}

Javascript:

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

Damit ein Element auf Blockebene scrollen kann, geben Sie ihm overflow:auto; und abhängig von Ihrer Site/App height:100%;. Um das Scrollen im Hauptinhalt zu deaktivieren, gibt es einige Möglichkeiten, mit denen Sie jedoch experimentieren müssen. Sie können das Navigationselement auf 100% der Seitenbreite ausdehnen lassen und den Bereich, in dem der Inhalt angezeigt wird, nur durch ein unsichtbares Element verdecken, um das Scrollen zu blockieren oder das Navigationselement einfach weiter zu scrollen. Sie können beim Klicken auch das Scrollen des Körpers deaktivieren/aktivieren. Beachten Sie, dass overflow:hidden; auf html,body angewendet wird, um die besten Ergebnisse zu erzielen. Dies behebt einige browser-/iosübergreifende Probleme.

Hoffe das gibt dir einen Einblick!

4
Shan Robertson

Nun, Sie können diese Attribute zu Ihrem Div-Container hinzufügen, wenn das Menü geöffnet wird

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

oder

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

wie @Shan Robertson erklären

Oder fügen Sie einfach eine Klasse mit diesen Attributen hinzu, die das Scrollen des Hauptinhalts blockieren, während das Navigationsfenster geöffnet ist.

Sie müssen keinen externen Code schreiben, sondern schreiben ihn einfach in die 'afterOpen'-Einstellungen' afterOpen ': function () {$ ("body") .css ("overflow-y", "hidden");

1
Bassem Zaitoun