Question

大家好我实现聊天，问题是每次我重新加载页面时滚动总是在聊天的顶部，我想在底部，我尝试使用jquery但是没有用。

这是我的HTML：

<body>
<div class="chatbox">
    <div class="chatlogs">
        <div class="chat friend">
            <div class="user-photo"></div>
            <p class="chat-message">What's up, Brother ..!!</p> 
        </div>
        <div class="chat friend">
            <div class="user-photo"></div>
            <p class="chat-message">What's up, Brother ..!!</p> 
        </div>
        <div class="chat self">
            <div class="user-photo"></div>
            <p class="chat-message">What's up ..!!</p>  
        </div>
        <div class="chat self">
            <div class="user-photo"></div>
            <p class="chat-message">A única área que eu acho, que vai exigir muita atenção nossa, e aí eu já aventei a hipótese de até criar um ministério. É na área de... Na área... Eu diria assim, como uma espécie de analogia com o que acontece na área agrícola.</p>    
        </div>
        <div class="chat friend">
            <div class="user-photo"></div>
            <p class="chat-message">No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.

            Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.
            </p>    
        </div>
    </div>
    <div class="chat-form">
        <textarea></textarea>
        <button>Send</button>
    </div>
</div>

这是我的css：

* {
    margin: 0;
    padding: 0;
    font-family: tahoma, sans-serif;
    box-sizing: border-box;
}

body {
    background: #1ddced;
}

.chatbox {
    width: 500px;
    min-width: 390px;
    height: 600px;
    background: #fff;
    padding: 25px;
    margin: 20px auto;
    box-shadow: 0 3px #ccc;
}

.chatlogs {
    padding: 10px;
    width: 100%;
    height: 450px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.chatlogs::-webkit-scrollbar {
    width: 10px;
}

.chatlogs::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(0,0,0,.1);
}

.chat {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    margin-bottom: 10px;
}


.chat .user-photo {
    width: 60px;
    height: 60px;
    background: #ccc;
    border-radius: 50%;
}

.chat .chat-message {
    width: 80%;
    padding: 15px;
    margin: 5px 10px 0;
    border-radius: 10px;
    color: #fff;
    font-size: 20px;
}

.friend .chat-message {
    background: #1adda4;
}

.self .chat-message {
    background: #1ddced;
    order: -1;
}

.chat-form {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
}

.chat-form textarea {
    background: #fbfbfb;
    width: 75%;
    height: 50px;
    border: 2px solid #eee;
    border-radius: 3px;
    resize: none;
    padding: 10px;
    font-size: 18px;
    color: #333;
}

.chat-form textarea:focus {
    background: #fff;
}

.chat-form button {
    background: #1ddced;
    padding: 5px 15px;
    font-size: 30px;
    color: #fff;
    border: none;
    margin: 0 10px;
    border-radius: 3px;
    box-shadow: 0 3px 0 #0eb2c1;
    cursor: pointer;

    -webkit-transaction: background .2s ease;
    -moz-transaction: backgroud .2s ease;
    -o-transaction: backgroud .2s ease;
}

.chat-form button:hover {
    background: #13c8d9;
}

还有一个问题，我可以阻止水平滚动不仅隐藏。我希望你们能帮忙，谢谢。

Answer 1

您主要寻找javascript原生scrollIntoView功能。虽然代替其他任何东西，你仍然需要jQuery来找到要滚动的元素。

$(document).ready(function () {
  $('.chat.friend').last()[0].scrollIntoView();
})

酷炫的选项，例如https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

的平滑滚动和兼容性

至于阻挡横向滑动，我不太清楚你的意思。你已经得到了适当的包装文字。如果您希望防止很长的字词或网址偏离边缘，请查看https://www.w3schools.com/cssref/css3_pr_word-break.asp，例如，

word-break: break-all;

如果你意味着图像，那么你需要看到图像的最大宽度属性

img {
  max-width: 100%;
}

Answer 2

尝试在页面声明中添加MaintainScrollPositionOnPostback="true"。将此设置为true将使用户在发生回发后保持在屏幕上的相同位置。

您可以阅读更多相关信息here.

每次重新加载页面时滚动都会下降吗？

2 个答案: