在另一個div中滾動div

我想添加滾動到第二部分，它是「chat-messages」div中的「chat-messages」div。我只需要這個「聊天消息」就可以滾動，而不需要任何scrool。在這一刻，我必須滾動整個網站才能看到「輸入行」div。當我將「overflow: auto」設置爲「聊天欄」時，它非常有用，但是整個input-row也包含在滾動中。請給我最好的css/html選項如何解決這個問題，或者給我簡單的JavaScript庫。在另一個div中滾動div

的jsfiddle鏈接：

jsfiddle.net/o9vmfgpx/3

編輯：我做這個工作，但在某些哈克的方式。

.chat-messages { 
    overflow-y: scroll; 
    -ms-overflow-style: none; 
} 
.chat-messages::-webkit-scrollbar { 
    display: none; 
} 

@-moz-document url-prefix() { 
    .chat-messages { 
     right: -5%; 
     padding-right: 3%; 
    } 
}

工程上最新版本的IE瀏覽器，EDGE，Chrome瀏覽器，Firefox和Opera的（如2016年10月14日）

來源

2016-10-14 Adam Mańkowski

這應該可以與基本的CSS。例如'.chat-messages {overflow-y：scroll;高度：300px;}' – DBS

您是否找到了解決方案？ –

@ K.Daniek是的，但一個瀏覽器沒有一個解決方案。我用我找到的解決方案更新了我的問題。 –

這應該工作。

body { 
     overflow:hidden; 
} 
.chat-messages { 
     overflow:scroll !important; 
}

來源

2016-10-14 15:29:29

我已經嘗試過js小提琴，但它不在那裏工作。我知道這是它，它應該工作。 –

這使整個網站「靜態」，添加scroolbar的聊天消息，就是這樣，我不能scrool聊天消息 –

試試這個。

.input-row { 
    position: fixed; 
    bottom: 10px; 
    left: 10px; 
}

來源

2016-10-14 15:35:25

請嘗試添加下面的CSS？

.chat-messages { 
    height:200px; 
    overflow:scroll; 
}

來源

2016-10-14 15:36:30 heady12

但是，不同的決議呢？我希望高度成爲可見網站的100％。 –

將高度改爲100vh怎麼樣？ – heady12

在另一個div中滾動div

回答

相關問題