Kalıcı bir iletişim kutusu ekrandan daha uzun olduğunda sayfa nasıl kaydırılır?

Uygulamamda y yönünde oldukça uzun sürebilen kalıcı bir iletişim kutusu var. Bu, iletişim kutusunun içeriğinin bir kısmının sayfanın altından gizlendiği bir sorunu ortaya çıkarır.

Pencere kaydırma çubuğunun, görüntülendiğinde iletişim kutusunu kaydırmasını ve ekrana sığmayacak kadar uzun olmasını, ancak ana gövdeyi modalin arkasında yerinde bırakmasını istiyorum. Trello kullanırsanız, ne için gittiğimi biliyorsunuz.

Kaydırma çubuğunu kontrol etmek için JavaScript kullanmadan bu mümkün müdür?

Şimdiye kadar modal ve iletişim kutuma uyguladığım CSS:

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}

sadece kullan

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

modalınızı düzenleyecek ve ardından ona dikey bir kaydırma verecektir

Bunu benim için düzelten şey buydu:

max-height: 100%;
overflow-y: auto;

DÜZENLEME : Şu anda Twitter'da kullanılan aynı yöntemi kullanıyorum, burada modal içeriğin üstünde ayrı bir sayfa gibi davranıyor ve modalin arkasındaki içerik siz kaydırdıkça hareket etmiyor.

Özünde şu:

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

Modal üzerindeki bu CSS ile:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Pure JS sürümü (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

Bu, sayfanın veya kalıcı iletişim kutusunun yüksekliği veya genişliği ne olursa olsun çalışır, farenizin / parmağınızın nerede olduğu fark etmeksizin kaydırmaya izin verir, bazı çözümlerin ana içerikte kaydırmayı devre dışı bırakan sarsıcı atlama özelliği yoktur ve harika görünür.

Değişiklik position

position:fixed;
overflow: hidden;

-e

position:absolute;
overflow:scroll;

İşte içeriğine göre otomatik olarak yeniden boyutlandıran ve pencereye sığmadığında kaydırmaya başlayan modal pencere demom.

Modal pencere demosu (HTML kaynak kodundaki yorumlara bakın)

Bunların hepsi yalnızca HTML ve CSS ile yapılır - kalıcı pencereyi görüntülemek ve yeniden boyutlandırmak için JS gerekmez (ancak yine de pencereyi görüntülemek için buna ihtiyacınız vardır - yeni sürümde JS'ye hiç ihtiyacınız yoktur).

Güncelleme (daha fazla demo):

• Üste hizalanmış kalıcı pencere

• Ortalanmış Modal pencere

• Javascript kullanan eski demo

Buradaki nokta, dış tarafın sabit konumu tanımladığı ve iç tarafın kaydırmayı oluşturduğu dış ve iç DIV'lere sahip olmaktır. (Demoda, gerçek bir kalıcı pencere gibi görünmelerini sağlayacak daha fazla DIV var.)

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }

Sabit konumlandırma tek başına bu sorunu çözmüş olmalıdır, ancak bu sorunu önlemek için başka bir iyi çözüm, modal div'lerinizi veya öğelerinizi sitenizin düzeninde değil sayfanın altına yerleştirmektir. Modal eklentilerin çoğu, kullanıcının ana sayfayı kaydırmaya devam etmesini sağlamak için kalıcı konumlandırmalarını mutlak olarak verir.

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>

İşte .. Benim için mükemmel çalışıyor

.modal-body { 
    max-height:500px; 
    overflow-y:auto;
}

Bu css'yi ekleyerek bunu yapmanın basit yolu Yani, bunu CSS'ye eklediniz:

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

ve çalışıyor!

position:fixedmodal pencerenin bakış açısına göre sabit kalacağını ima eder. Bu senaryoda uygun olduğuna dair değerlendirmenize katılıyorum, bunu akılda tutarak neden kalıcı pencerenin kendisine bir kaydırma çubuğu eklemiyorsunuz?

Eğer öyleyse, doğru max-heightve overflowözellikler hile yapmalıdır.

Sonunda, kalıcı ekranın arkasındaki sayfanın içeriğinde, sayfayı kaydıracak kadar uzun süre kalmamasını sağlamak için değişiklik yapmak zorunda kaldım.

Bunu yaptıktan sonra position: absolute, kullanıcı artık sayfayı aşağı kaydıramadığı için iletişim kutusuna başvururken karşılaştığım sorunlar çözüldü.

Modal açıkken Pencere Sayfası Kaydırma Çubuğu tıklanabilir

Bu benim için çalışıyor. Saf CSS.

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

Deneyin ve bana bildirin

Dinamik genişlik ve yüksekliğe sahip bu model sorununa saf CSS cevabımı eklemek istedim. Aşağıdaki kod, aşağıdaki gereksinimlerle de çalışır:

1. Modu ekranın ortasına yerleştirin
2. Modal, görüntü alanından daha yüksekse, kaydırma kısıcı (kalıcı içerik değil)

HTML:

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS / DAHA AZ:

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

Bu şekilde modal her zaman görünüm alanı içindedir. Modalin genişliği ve yüksekliği istediğiniz kadar esnektir. Basit olması için yakın simgemi bundan kaldırdım.