如何正确自动滚动到滚动条的末尾？

时间：2019-04-21 11:43:22

标签： javascript jquery css

我正在创建一个自定义的聊天窗口，并试图完全从头开始构建它。我是前端开发人员的新手。我来自后端开发人员背景。因此，我正在并行学习和应用概念。

到目前为止，我已经能够创建聊天窗口的类型，并且每次添加新的聊天消息时，窗口都会自动滚动到底部。

但是，自动滚动将一直运行到大约前8-10条消息为止，然后滚动至底部，并且无法正常工作，如所附图片所示：

enter image description here

以下为摘要：

function scrollToBottom() {
  $(".scrollContent").animate({
    scrollTop: $(document).height()
  }, "fast");
}
/**
  General CSS - Start
*/

body {
  background-color: #f4f4f4;
}

#PageTitle {
  /** background-color: #0295e5; **/
  background-color: #ff6600;
  padding: 10px;
  width: 460px;
  margin-top: 200px;
  margin-left: 200px;
  color: white;
  border-radius: 10px;
  border-color: #0295e5;
  box-shadow: 1px 2px 5px 1px #888888;
}

* {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
}

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.list-group {
  max-height: 480px;
  margin-bottom: 10px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.chatboxcontenttile {
  overflow-x: hidden;
}

.chatboxcontenttile::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

.chatboxcontenttile::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
}

.chatboxcontenttile::-webkit-scrollbar-thumb {
  background-color: #000000;
}


/** CSS for SVG image - Start */

.svg {
  margin-top: 5px;
  margin-left: -18px;
}

svg path,
svg circle {
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
}

svg:hover path {
  fill: #0295e5;
}


/** CSS for SVG image - End */


/**
  General CSS - End
*/


/**
  Chat Bubble - Start
*/

#bubble_Container {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border-style: solid;
  border-width: 5px;
  border-color: #0295e5;
  box-shadow: 5px 9px 18px 6px #888888;
  color: white;
  /* Positioning code */
  position: absolute;
  bottom: 20px;
  right: 50px;
}

#bubble_Container img {
  width: 45px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#bubble_Container:hover {
  cursor: pointer;
  bottom: 25px;
  right: 50px;
  box-shadow: 5px 9px 18px 10px #888888;
  transition: 200ms;
  -webkit-transition: 200ms;
  fill: red;
}

#bubble_Container:active {
  cursor: pointer;
  bottom: 20px;
  right: 50px;
  box-shadow: 5px 9px 18px 6px #888888;
}


/**
  Chat Bubble - End
*/


/**
  Chat Box Container - Start
*/

#chatbox_container_id {
  position: absolute;
  bottom: 0px;
  right: 50px;
  width: 420px;
  height: 600px;
  background-color: white;
  visibility: hidden;
  /* Formattings */
  border-style: solid;
  border-width: 0px;
  border-color: #e5e3e3;
  box-shadow: 5px 10px 30px 3px #888888;
}


/**
  Chat Box Container - End
*/


/**
  Chat Box Container Title - Start
*/

#ChatboxTitleBlock {
  height: 70px;
}

#ChatboxTitleBlockName {}

#ChatboxTitleBlockName h4 {
  position: absolute;
  left: 45px;
  right: 0;
  top: 20px;
  bottom: 0;
  margin: auto;
  width: 140px;
  color: #2F80ED;
}

#ChatboxTitleBlockClose {}

#ChatboxTitleBlockCloseButton {
  position: absolute;
  right: 5px;
}


/**
  Chat Box Container Title - End
*/


/**
  Chat Box Container Content Area - Start
*/

#ChatboxContentBlock {
  height: 480px;
}

.chatboxcontenttile {
  padding: 0px;
  width: 100%;
  clear: both;
}


/** Messaging CSS - Start */


/** sending css **/

.sendMessageRow {
  margin-top: 15px;
  margin-bottom: 15px;
}

.sendMessageRow .sendingLastCol {
  padding: 0px;
}

.sendMessageRow .sendingContentBlock {
  padding: 0px;
  margin-left: -10px;
}

.sendingContent p {
  display: inline-block;
  float: right;
  background-color: #2D9CDB;
  border-radius: 10px;
  padding: 16px 14px 16px 14px;
  color: #FFFFFF;
  /* fonts */
  font-style: normal;
  font-weight: normal;
  font-size: 12.5px;
  line-height: normal;
}

.sendMessageRow .sendingThumbnail {
  padding: 0px;
  margin-top: 0px;
  margin-left: 8px;
}

.sendMessageRow .sendingThumbnail img {
  width: 50px;
}


/** reply css **/

.replyMessageRow {
  margin-top: 15px;
  margin-bottom: 15px;
}

.replyMessageRow .replyThumbnail {
  padding: 0px;
  margin-left: 28px;
}

.replyMessageRow .replyThumbnail img {
  width: 40px;
}

.replyMessageRow .replyContentBlock {
  padding: 0px;
  margin-left: -28px;
}

.replyContent p {
  display: inline-block;
  background: rgba(227, 235, 244, 0.8);
  color: #6b6a6a;
  border-radius: 10px;
  padding: 15px 14px 15px 14px;
  /* fonts */
  font-style: normal;
  font-weight: normal;
  font-size: 12.5px;
  line-height: normal;
}

.replyMessageRow .replyLastCol {
  padding: 0px;
}


/** Messaging CSS - End */


/**
  Chat Box Container Content Area - End
*/


/**
  Horizontal Divider - Start
*/

#contentInputDivider {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  border: 1;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}


/**
  Horizontal Divider - End
*/


/**
  Chat Box Container Input - Start
*/

#ChatboxInputBlock {
  margin-top: 2px;
  height: 32px;
}

#ChatboxInputBox {
  margin-top: 1px;
}

#chatBoxInput {
  border: none;
  margin-left: -7px;
  outline: none;
}

#ChatboxVoiceBox {}

#ChatboxSendBox {}


/**
  Chat Box Container Input - End
*/


/**
    SCROLL BAR - Start
*/

.scrollContent {
  width: 420px;
  height: 480px;
  overflow: hidden;
  overflow-y: scroll;
}

::-webkit-scrollbar {
  width: 5px;
  border-radius: 10px;
}

;
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px 0px 0px 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 102, 0, 1);
  border-radius: 10px 0px 0px 10px;
}


/**
    SCROLL BAR - End
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Chat box Start -->
<div class="container chatbox_container" id="chatbox_container_id" >

	<!-- Chat box title Start -->
	<div class="row" id="ChatboxTitleBlock">
  			<div class="col-sm-11" id="ChatboxTitleBlockName"><h4>A Bot</h4></div>
  			<div class="col-sm-1" id="ChatboxTitleBlockClose">
  				<button type="button" class="close" aria-label="Close" id="ChatboxTitleBlockCloseButton" >
  					<span aria-hidden="true">&times;</span>
			</button>
  			</div>
	</div>
	<!-- Chat box title End -->

	<!-- Chat box content area Start -->
	<div class="row" id="ChatboxContentBlock">
				<div class="scrollContent">
					
					<!-- chat messages start -->

					<div class="row replyMessageRow">
						<div class="col-sm-2 replyThumbnail">
							<img src="/images/botimg.png">
						</div>
						<div class="col-sm-8 replyContentBlock">
							<div class="replyContent">
								<p>How are you?</p>
							</div>
						</div>
						<div class="col-sm-2 replyLastCol">
							
						</div>
					</div>

					

					<div class="row sendMessageRow">
						<div class="col-sm-2 sendingLastCol">
							
						</div>
						<div class="col-sm-8 sendingContentBlock">
							<div class="sendingContent">
								<p>new content ok. Yeah, I agree.</p>
							</div> 
						</div>
						<div class="col-sm-2 sendingThumbnail">
							<img src="/images/sam.png">
						</div>
					</div>

					<div class="row replyMessageRow">
							<div class="col-sm-2 replyThumbnail">
								<img src="/images/botimg.png">
							</div>
							<div class="col-sm-8 replyContentBlock">
								<div class="replyContent">
									<p>How are you? Yeah, just answering my own question. How is the world now a days? is it yet a better place? I hope so. Yeah, this is just a dummy paragraph.</p>
									
								</div>
							</div>
							<div class="col-sm-2 replyLastCol">
								
							</div>
					</div>

					<div class="row sendMessageRow">
						<div class="col-sm-2 sendingLastCol">
							
						</div>
						<div class="col-sm-8 sendingContentBlock">
							<div class="sendingContent">
								<p>new content ok. Yeah, I agree.</p>
							</div> 
						</div>
						<div class="col-sm-2 sendingThumbnail">
							<img src="/images/sam.png">
						</div>
					</div>

					<div class="row replyMessageRow">
							<div class="col-sm-2 replyThumbnail">
								<img src="/images/botimg.png">
							</div>
							<div class="col-sm-8 replyContentBlock">
								<div class="replyContent">
									<p>How are you?</p>
									
								</div>
							</div>
							<div class="col-sm-2 replyLastCol">
								
							</div>
					</div>

					

					<!-- chat messages end -->

				</div>
			
		

	</div>
	<!-- Chat box content area End -->

	<!-- Divider Start -->
	<hr id="contentInputDivider" />
	<!-- Divider End -->

	<!-- Chat box input area Start -->
	<div class="row" id="ChatboxInputBlock">
		<div class="col-sm-10" id="ChatboxInputBox">
			<input id="chatBoxInput" class="form-control form-control-sm" type="text" placeholder="Type your message here">
		</div>
		<div class="col-sm-1" id="ChatboxVoiceBox">
			<img src="/images/ic_mic_24px.svg" class = "svg">
		</div>
		<div class="col-sm-1" id="ChatboxSendBox">
			<img src="/images/ic_send_24px.svg" class="svg">
		</div>
		
	</div>
	<!-- Chat box input area End -->
</div>
<!-- Chat box End -->

如何正确地自动滚动，以便无论我在聊天窗口中键入多少消息，都不会自动滚动到底部？

谢谢。

1 个答案:

答案 0 :(得分：1)

轻松修复：

/**
 *  Auto scroll to bottom
 */
function scrollToBottom() {
    $(".scrollContent").animate({ scrollTop: Number.MAX_SAFE_INTEGER }, "fast");
}

更正确的解决方法是，文档的高度不一定是scrollContent内内容的高度，如果在“ .scrollContent”元素内只有一个孩子，那么它将起作用：

/**
 *  Auto scroll to bottom
 */
function scrollToBottom() {
    $(".scrollContent").animate({ scrollTop: $(".scrollContent > *").height() }, "fast");
}
相关问题
最新问题