Seite vertikale Bildlauf

Question

Ich habe eine Frage zum vertikalen Scrollen. Ich habe nicht einen Code haben, um zu zeigen, aber ich habe ein Bild von Chrome Einstellungsseite:

Meine Frage lautet: Wie genau war es geschehen, dass die vertikale Bildlaufleiste nach oben alles weg geht, aber es funktioniert scrollen Sie nicht die ganze Seite - Geschichte bewegt sich nicht, wenn wir scrollen. Ich habe mir den Quellcode angeschaut und sehe mit all diesen Iframes und Links zu Chrome irgendwie gruselig aus. Ich weiß sogar nicht, ob es in Ordnung ist, diese Links in ein kommerzielles Produkt aufzunehmen. Ich versuche, diese Art von Verhalten in der Bootstrap-Welt nachzuahmen, kann aber so etwas nicht annähernd erreichen. Irgendein Hinweis, in welche Richtung es gehen soll?

Dank

hat dieses vereinfachte Code nach Anregungen:

div style="overflow:auto;z-index:99999;position:fixed"> 
<div class="container-fluid" style="min-width:1200px;display:inline-block;"> 
    <div class="row"> 
     <div class="col-xs-12"></div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12"></div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12"></div> 
    </div> 
</div> 
</div> 

Aber ich bin kein Scrollen zu bekommen.

Answer 1

Ihre Fragen zu beantworten:

Wie genau war es geschehen, dass die vertikale Bildlaufleiste nach oben alles weg geht, aber es scrollen nicht die ganze Seite - Geschichte bewegt sich nicht, wenn wir blättern.

Mit position: fixed. Es bleibt am selben Ort.

Ich schaute in den Quellcode und sah irgendwie erschreckend mit all diesen iFrames und Links zu Chrome. Ich weiß sogar nicht, ob es in Ordnung ist, diese Links in ein kommerzielles Produkt aufzunehmen.

Nein! Verwenden Sie niemals iFrames in einem der neuen Produkte. Sie sind immer noch nur für Einbettungszwecke verfügbar, auch für domänenübergreifende Einbettungen.

Ich versuche, diese Art von Verhalten in Bootstrap-Welt nachzuahmen, kann aber nicht annähernd so etwas erreichen. Irgendein Hinweis, in welche Richtung es gehen soll?

Bootstrap hat es bereits in seinen modalen Fenstern. . Wie zum Beispiel, können Sie sie durch die folgenden Schritte erstellen:

1. Geben body die overflow: hidden.
2. Machen Sie eine div mit position: fixed und eine große z-index die gesamte Maske.
3. Stellen Sie sicher, dass Sie overflow: auto dieser Maske div geben.
4. Innerhalb der div, fügen Sie ein wenig div, die das echte Fenster enthält.
5. Wenn das kleinere Fenster div überläuft, erscheinen die Bildlaufleisten auf der Haupt div, die aussieht, als ob es auf der body erscheint, während body scroll unberührt ist.

Eine Probe Schnipsel wäre:

window.onload = function() { 
 
    document.getElementById("open-mask").onclick = function() { 
 
    document.body.classList.add('mask-on'); 
 
    document.getElementsByClassName("mask")[0].classList.remove('hidden'); 
 
    return false; 
 
    }; 
 
};

* { 
 
    font-family: 'Segoe UI'; 
 
    text-align: justify; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-bottom: 15px; 
 
    line-height: 1.5; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background-color: #fff; 
 
    padding: 0 15px; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.mask { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: 99998; 
 
    text-align: center; 
 
    overflow: auto; 
 
    background-color: rgba(0, 0, 0, 0.25); 
 
    padding: 150px 0; 
 
    margin: 0; 
 
} 
 
.mask .window { 
 
    display: inline-block; 
 
    width: 50%; 
 
    min-width: 200px; 
 
    background-color: #fff; 
 
    padding: 15px; 
 
} 
 
.mask-on { 
 
    overflow: hidden; 
 
}

<div class="mask hidden"> 
 
    <div class="window"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi nemo quos sed, similique fugiat autem? Facere ex hic mollitia, dolore quasi dolor laudantium asperiores! Esse perferendis ratione, porro sequi deserunt.</p> 
 
    <p>Numquam blanditiis obcaecati, quae reiciendis sint consequuntur eaque illo dolorem distinctio animi esse excepturi accusantium magni quam at repellendus expedita reprehenderit earum minima? Facere iusto ipsa quod repudiandae deserunt quibusdam.</p> 
 
    <p>Sint rerum natus asperiores earum atque dolor voluptatem perferendis excepturi, repellat nemo sequi neque, vel architecto provident deserunt commodi soluta quis voluptatum vitae iure. Aliquid, nihil, iste. A ab, itaque.</p> 
 
    <p>Iste itaque quia corporis dolorem est, voluptas, sunt magni cum neque reiciendis, veritatis incidunt esse ratione consectetur exercitationem, cupiditate officia ab repellat maiores illo voluptatibus et ad accusamus. Error, excepturi.</p> 
 
    <p>Tempora non, dolorem unde suscipit voluptatum velit eligendi placeat cumque corporis neque labore quae, id temporibus? Qui quidem a error rem, molestias esse sit dolore asperiores expedita nisi omnis animi?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi nemo quos sed, similique fugiat autem? Facere ex hic mollitia, dolore quasi dolor laudantium asperiores! Esse perferendis ratione, porro sequi deserunt.</p> 
 
    <p>Numquam blanditiis obcaecati, quae reiciendis sint consequuntur eaque illo dolorem distinctio animi esse excepturi accusantium magni quam at repellendus expedita reprehenderit earum minima? Facere iusto ipsa quod repudiandae deserunt quibusdam.</p> 
 
    <p>Sint rerum natus asperiores earum atque dolor voluptatem perferendis excepturi, repellat nemo sequi neque, vel architecto provident deserunt commodi soluta quis voluptatum vitae iure. Aliquid, nihil, iste. A ab, itaque.</p> 
 
    <p>Iste itaque quia corporis dolorem est, voluptas, sunt magni cum neque reiciendis, veritatis incidunt esse ratione consectetur exercitationem, cupiditate officia ab repellat maiores illo voluptatibus et ad accusamus. Error, excepturi.</p> 
 
    <p>Tempora non, dolorem unde suscipit voluptatum velit eligendi placeat cumque corporis neque labore quae, id temporibus? Qui quidem a error rem, molestias esse sit dolore asperiores expedita nisi omnis animi?</p> 
 
    </div> 
 
</div> 
 
<p> 
 
    <a href="javascript:;" id="open-mask">Open Mask</a> 
 
</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis doloremque veritatis ipsam! Odit id a consectetur earum molestias, reiciendis quam ad molestiae maxime impedit magni blanditiis, omnis sunt neque nihil.</p> 
 
<p>Similique iure vitae, qui nostrum necessitatibus modi sequi odio nobis, eius molestias placeat, quos debitis? Aspernatur deserunt doloribus laboriosam illo pariatur asperiores quo officia iusto accusantium, saepe, provident qui facilis!</p> 
 
<p>Ducimus, repudiandae dolores. Error animi vitae dolore, aliquam eius eos quidem veritatis debitis blanditiis. Dignissimos, commodi consequuntur. Et, inventore nulla quae, ad maxime animi iste. Voluptas nihil mollitia tempore unde!</p> 
 
<p>Cumque qui expedita perspiciatis quia sunt suscipit adipisci! Architecto nesciunt exercitationem alias esse earum iste beatae nihil id obcaecati adipisci quaerat accusamus eaque blanditiis, mollitia, placeat modi, deserunt perferendis maxime.</p> 
 
<p>Magnam veritatis perspiciatis ex optio consequatur dolore culpa, nostrum quibusdam illo inventore fugiat explicabo unde magni, voluptatem asperiores laboriosam commodi impedit nemo molestiae. Libero dolores modi magnam fugit. Autem, cum.</p> 
 
<p>Sit voluptatibus quasi, voluptatem tempora culpa sed esse animi ut quas eligendi quos sequi amet, molestiae officia nulla laboriosam dolorem ipsum vel earum laudantium! Nihil blanditiis, a esse incidunt molestiae.</p> 
 
<p>Aut recusandae at fugit ad officia fuga odio, dolorem vitae, natus neque laborum porro provident illum accusamus inventore vel tempora similique maxime soluta ab culpa. Sit consequuntur consectetur accusantium distinctio.</p> 
 
<p>Doloribus dignissimos praesentium, tempore, distinctio perspiciatis quas enim repellat eos eius omnis ratione blanditiis unde dolorum, mollitia. Doloremque, nisi amet, tenetur libero dolorem quis natus ducimus vitae, eveniet ratione commodi.</p> 
 
<p>Alias, facilis, sit. Dolorem, blanditiis. Qui vel modi sunt, architecto optio saepe quo culpa. Atque iste velit unde assumenda quasi, amet nesciunt vitae id quo, eum eveniet ducimus. A, libero.</p> 
 
<p>Id expedita, quas, tempore est vitae aspernatur sit sequi odio necessitatibus omnis totam nihil unde nulla eaque tempora, voluptate? Inventore soluta, consectetur animi sit alias ab veniam qui officia incidunt.</p> 
 
<p>Placeat quas, maiores accusamus odio laudantium. Possimus accusamus beatae, architecto porro. Sunt in neque, atque, minima odio pariatur maiores, consectetur dolorem recusandae rem, eveniet possimus aut repudiandae numquam ad saepe!</p> 
 
<p>Rem officiis molestiae ipsam veritatis soluta in assumenda culpa voluptatibus quo modi necessitatibus beatae mollitia officia deleniti ullam neque, qui, porro nesciunt maxime! Veritatis aut aliquam sunt impedit repudiandae iusto.</p> 
 
<p>Autem labore quod magnam. Enim ad dolorem, reprehenderit repellendus architecto, officia quis nihil quia laudantium totam nisi velit neque voluptatibus saepe cum in unde consectetur quidem non omnis, consequatur praesentium.</p> 
 
<p>Cupiditate ipsam, animi esse exercitationem, neque tempora eum aperiam. Illum adipisci minima necessitatibus quae, laudantium assumenda suscipit, quas, natus corporis temporibus voluptatum officiis molestias obcaecati culpa provident nisi maxime possimus!</p> 
 
<p>Voluptatibus cumque eius illum esse laudantium tempora consequuntur unde harum, voluptates dolor ex quidem, tenetur, enim culpa ullam similique dolorum corporis nam voluptas voluptatum. Aperiam nam saepe earum sequi laudantium.</p>

Hinweis: Sie müssen den Code-Schnipsel erneut ausführen den Modal Popup zu schließen.