如何使用主窗口滾動條滾動模式？

Question

問題是，如果你有一個長模式，那麼你需要添加一個選項來向下滾動。

但是，向模式本身添加滾動條會對UX不利，導致人們直觀地習慣於使用屏幕右端的滾動條進行滾動。

一些網站有這個想通了，像Twitter和產品亨特：

我仍無法理解如何實現它。我一直在網上搜索一些材料，但不幸的是找不到任何材料。

如果您有關於如何完成的想法，請告訴我。

更新：

這裏是我當前模式的樣式：

.modal { 
    box-shadow:0 12px 30px rgba(0,0,0,0.3); 
    z-index:103; 
    border-radius:5px; 
    text-align:center; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
    top: 60px; 
    position:fixed; 
    overflow-y: auto; 
    overflow-x: hidden; 
    max-height: calc(100vh - 100px); 
} 

Answer 1

在twitter上的滾動條是不是主窗口滾動條 - 它只是在他們的模態對話框滾動條帶是全屏幕，然後他們將模態對話框的內容定位在中心。所以，當你滾動模式時，滾動條位於最右側，就像主窗口滾動條一樣。

要做到這一點，我只是讓你的.modal一個全屏幕模式與overflow: auto，然後absolute ly定位在它的模態內容。因此，您正在滾動主窗口.modal，並且滾動條像主窗口滾動條一樣位於最右側。

.modal { 
 
    z-index: 103; 
 

 
    text-align: center; 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    overflow: auto; 
 
} 
 

 
.modalContent { 
 
    position: absolute; 
 
    top: 60px; 
 
    left: 50%; 
 
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    border-radius: 5px; 
 
    margin-bottom: 60px; 
 
}

<div class="modal"> 
 
    <div class="modalContent"> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    </div> 
 
</div>