將聊天窗口固定在底部

-1

我正在爲其正在進行聊天的項目工作。所有與聊天相關的工作都很好，但是我的問題是，當overflow-y處於活動狀態時，我希望聊天窗口固定在底部，因此我不必手動向下滾動即可查看最新消息。（實的東西怎麼聊& twitch.tv聊天作品）將聊天窗口固定在底部

（我很抱歉，我不能表現出任何我嘗試在做這個，我只是不知道該怎麼辦。）

謝謝提前。

編輯：這裏是一些HTML代碼的。

注：實際消息推爲字符串登錄

// CSS

#chat { 
    margin-top: 110px; 
    background-color: #FAF9FA; 
    height: 75%; 
} 

#chat-window { 
    height: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
}

// HTML

<div class="col-sm-3"> 
    <div id="chat"> 
     <div id="chat-window"> 
      <div id="logs"> 

      </div> 
     </div> 

     <input type="spec" id="message" placeholder="Type your message..."/></br> 
     <button id="send" class="btn">Send</button> 

    </div> 
</div>

來源

2017-10-06 John Doe

你嘗試的位置是：固定的風格屬性或class css？ –

@GurpreetSingh是的，但這並沒有真正的幫助，它確實打破了一切。 –

那麼也許你應該嘗試修復損壞的部分，而不是找到一個不好的解決方案。位置：固定通常是正確的路線。此外，它獨立於任何孩子的溢出或滾動。 –

我不知道如果我明白你的目標，但我認爲只是CSS的立場：固定解決你的問題。

.chat-box { 
    position: fixed; 
    background: #ccc; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
}

例如：https://jsfiddle.net/Julivan/261qjdp9/

希望它有助於

來源

2017-10-06 19:30:19 user827322

那麼，如果你的目標是簡單地滾動至底部：

window.scrollTo(0, document.getElementById('myChatWindow').scrollHeight);

來源

2017-10-06 19:32:22 justadudewhohacks

將聊天窗口固定在底部

回答

相關問題