javascript - 如何在显示前页面自动滚动到底部

标签 javascript jquery css chat

我们开发聊天应用程序，因为我在内容 div 中显示图像、音频和文本。

我们有页眉 div、内容 div、页脚 div。在内容 div 中动态添加新数据我希望每次都显示在底部。如果想查看以前的数据，我想向下滚动查看。如何使用 jquery 做到这一点

$(document)
		.on(
				"pagebeforeshow",
				"#chat",
				function() {
					window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
		onFileSystemSuccess, fail);

		load = true;
		$('#opchat').empty();
		$("#preopchat").empty();
		$("#opchat1").empty();
		var checkData = storageChat.getItem("chatdata");
		if (JSON.parse(checkData) != null
				&& JSON.parse(checkData) != undefined) {
			storeChatData = JSON.parse(checkData).slice();
			if (storeChatData.length > 10) {
				var sliceChatData = [];
			sliceChatData = storeChatData.slice(Math.max(
				storeChatData.length - 10, 1));
			for (var i = 0; i < sliceChatData.length; i++) {
				if (sliceChatData[i] != undefined) {
				if (sliceChatData[i].startsWith("file:///")) {
			var filepath = sliceChatData[i].split(",")
			if (filepath[1] == 'image/jpeg') {
			var storedChat = '<img class="popphoto" id="profImgDashBrd"	style="height: 70px; width: 70px;" src=\''
													+ sliceChatData[i]
													+ '\'  >';
											previewData(storedChat);
		} else if (filepath[1] == 'audio/mpeg') {
						var storedChat = "<audio controls>"
							+ "<source src='"
								+ sliceChatData[i]
								+ "' type='video/mp4'>"
						+ "</audio>" + "<br>";
					previewData(storedChat);
			} else {
		var filepath = storeChatData[i].split(",")	
			var storedChat ="<div class='right'>" + "<p>"
			+ filepath[1] + "</p>" + "</div";
			$("#opchat1").append(storedChat);
			}

			} else {
		var storedChat ="<div class='left'>" + "<p>"
				+ sliceChatData[i] + "</p>" + "</div>" + "<br>";
			$("#opchat").append(storedChat);

					}
				}
			}
		} else {
			for (var i = 0; i < storeChatData.length; i++) {
			if (storeChatData[i] != undefined) {
			if (storeChatData[i].startsWith("file:///")) {
			var filepath = storeChatData[i].split(",")
			if (filepath[1] == 'image/jpeg') {
			var storedChat = '<img class="popphoto" style="height: 70px; width: 70px;" src=\''
					+ filepath[0] + '\'  >';
					previewData(storedChat);
					} else if (filepath[1] == 'audio/mpeg') {
			var storedChat = "<audio controls>"
					+ "<source src='"
			+ filepath[0]
		+ "' type='video/mp4'>"
			+ "</audio>" + "<br>";
						previewData(storedChat);
			} else {
			var filepath = storeChatData[i].split(",");
			var storedChat ="<div class='right'>" + "<p>"
			+ filepath[1] + "</p>" + "</div";
			$("#opqicchat1").append(storedChat);
											
				}
			} else {
	var storedChat ="<div class='left'>" + "<p>"
			+ storeChatData[i] + "</p>" + "</div>" + "<br>"
			$("#opqicchat").append(storedChat);
			}
			}
			}
	}
			}
				});

function onFileSystemSuccess(fileSystem) {
	folderName = "QLM"
	var directoryEntry = fileSystem.root;
	directoryEntry.getDirectory(folderName, {
		create : true,
		exclusive : false
	}, gotDirEntry, fail)

}

function gotDirEntry(dirEntry) {

	dirEntry.getFile("newFile.txt", {
		create : true,
		exclusive : false
	}, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
	return true;
}

function fail() {
	alert("error code");
}

// Text ,audio and images Display in chat
function previewData(data) {
	var storedChat ="<div class='right'>" + "<p>" + data + "</p>" + "</div>" + "<br>";
	$("#opqicchat1").append(storedChat);
}

// Text enter and submit
$(document).on('click', '#btnchatsend', function() {
	var txtareaId = "txtarchat";
	var txtareaVal = $("#" + txtareaId).val();
	if (txtareaVal != null && txtareaVal != undefined && txtareaVal != "") {
		storeChatData.push("file:///" + "," + txtareaVal);
		storageChat.setItem("chatdata", JSON.stringify(storeChatData));
		previewData(txtareaVal)
	}
	$("#" + txtareaId).val("");
	$(textarea).val("");
});

// record audio and store
function startRecord() {
	navigator.device.capture.captureAudio(captureSuccess, captureError, {
		limit : 1
	});

}

function captureSuccess(e) {
	var audiofile = e[0].localURL;
	var audiofilePath = e[0].fullPath;
	audioname = audiofile.substr(audiofile.lastIndexOf('/') + 1);
	filename = Date.now().toString() + audioname;
	window.resolveLocalFileSystemURL(audiofile, copyFilePath, fail);
}
function captureError(e) {
	alert(JSON.stringify(e));

}

function playRecAudio(url) {
	if (play == true)
		audioRecord = new Media(url, onAudioSuccess, onAudioError);
	if (play == true) {
		audioRecord.play();
		play = false;
	} else {
		audioRecord.pause();
		play = true;
	}
}
function onAudioSuccess() {
}
function onAudioError() {
}

// capture image from camera

function getCapImg(source) {
	navigator.camera.getPicture(onSavedDocURISuccess, onFails, {
		destinationType : navigator.camera.DestinationType.FILE_URI,
		sourceType : source,
		saveToPhotoAlbum : true
	});
}

function imageGallery(source) {
	navigator.camera.getPicture(onSavedDocURISuccess, onFail, {
		quality : 30,
		targetWidth : 600,
		targetHeight : 600,
		destinationType : destinationType.FILE_URI,
		sourceType : source
	});
}
function onSavedDocURISuccess(imageURI) {
	filename = imageURI.substr(imageURI.lastIndexOf('/') + 1);
	filename = Date.now().toString() + filename;
	window.resolveLocalFileSystemURI(imageURI, copyFilePath, fail);

}
function copyFilePath(fileEntry) {
	window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {
		fileSys.root.getDirectory(folderName, {
			create : true,
			exclusive : false
		}, function(dir) {
			fileEntry.copyTo(dir, filename, onCopySuccess, fail);
		}, fail);
	}, fail);
}
function onCopySuccess(entry) {
	entry
			.file(function(file) {
				storeChatData.push(entry.toURL() + "," + file.type);
				storageChat.setItem("chatdata", JSON
						.stringify(storeChatData));
				var getimageData = storageQlmChat.getItem("chatdata");
				var arrayformate = JSON.parse(getimageData);

				$
						.each(
								arrayformate,
								function(index, value) {
									var imagepath = value.split(",")
									if (index == arrayformate.length - 1) {
										if (file.type == 'image/jpeg') {
											var storedChat = '<img class="popphoto" style="height: 70px; width: 70px;" src=\''
													+ imagepath[0] + '\'  >';
											previewData(storedChat);
										} else if (file.type == 'audio/mpeg') {
											var storedChat = "<audio controls>"
													+ "<source src='"
													+ imagepath[0]
													+ "' type='video/mp4'>"
													+ "</audio>" + "<br>";
											previewData(storedChat);
										}

									}
								});
			});
}

function fail(error) {
	alert("error" + error.code);
}
.left {
  margin-top:10px;
  position: relative;
  background: aqua;
  text-align: left;
  min-width: 85%;
  padding: 15px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  float: left;
  left: 8%;
}

.left::before {
  content: '';
  position: absolute;
  visibility: visible;
  top: -1px;
  left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #ccc;
}

.left::after {
  content: '';
  position: absolute;
  visibility: visible;
  top: 0px;
  left: -8px;
  border: 10px solid transparent;
  border-top: 10px solid aqua;
  clear: both;
}


 .right {
  position: relative;
  background: white;
  text-align: right;
  min-width: 85%;
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  float: right;
  right: 5%;
  margin-top: 10px;
} 

.right::before {
  content: '';
  position: absolute;
  visibility: visible;
  top: -1px;
  right: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #ccc;
}

.right::after {
  content: '';
  position: absolute;
  visibility: visible;
  top: 0px;
  right: -8px;
  border: 10px solid transparent;
  border-top: 10px solid white;
  clear: both;
}
<div class="headerDiv" data-role="header"
	id="hdrIdchat" data-position="fixed" data-tap-toggle="false" data-transition="none">
	<a class="ui-btn ui-icon-arrow-l ui-btn-icon-left" onClick="navBack()"></a>
	<h1 id="lblHdrchat">Chat</h1>

	<div data-tap-toggle="false" data-transition="none"  style="border-top:1px solid white;width: 100%; text-align: center; display: inline-flex;">		
		<div style="width: 100%; padding: 10px;">
				<img alt="" src="images/vo.png" onclick="startRecord()" style="height: 25px;">
			</div>
			<div style="width: 100%; padding: 10px">
				<img alt="" src="images/imcht.png" onClick="imageGallery(pictureSource.PHOTOLIBRARY)" style="height: 25px;">
			</div>
			<div style="width: 100%; padding: 10px">
				<img alt="" src="images/camcht.png" onclick="getCapImg(navigator.camera.PictureSourceType.CAMERA);" style="height: 25px;">
		</div>
	</div>
</div>

<div data-role="content">


	<div onclick="preChatData()">
		<p align="center"></p>
	</div>

	<div id="example">
		<div id="preopqicchat"></div>
		<div id="opqicchat" ></div>
		<div id="opqicchat1" ></div>
	</div>
</div>

<div data-role="footer" data-position="fixed" id="chatfooter"
	style="background: transparent; border: none;" data-tap-toggle="false" data-transition="none">
	<div style="display: inline-flex; width: 100%;">
		<div style="width: 100%">
			<textarea autofocus="autofocus" id="txtarchat"></textarea>
		</div>
		<div>
			<button data-role="button" class="ui-btn ui-btn-b"
				id="btnchatsend" style="width: 100% !Important;">SEND</button>
		</div>
	</div>
</div>

Actual Result

Expected Result

最佳答案

看看这个demo 

header,
footer {
  flex: 0 0 auto;
}

main 的高度随着内容的增加而增加。 flex 速记中的数字“1”表示容器中有多少可用空间分配给该元素。在我们的例子中，main 被赋予了可用空间。该值的自动部分是 flex 元素的默认大小。我们希望所有 flex children 都使用 auto。

main {
  flex: 1 0 auto;
  ...
}

无论如何，页脚将始终位于内容下方。

页脚从底部开始

enter image description here

页脚被内容压下

enter image description here

http://codepen.io/antibland/pen/WwKRBx

关于javascript - 如何在显示前页面自动滚动到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36785286/

上一篇：jquery - 如何卡住表格的第一列？

下一篇：html - IE 5 和 IE 11 上的 Css 选择框

相关文章：

javascript - 反转 Object.entries 转换

javascript - 如何使用状态在 React.js 中显示日期？

jquery - 使用 jQuery 将函数惰性绑定(bind)到多个事件

jquery group 每 3rd div

jquery - 打印可滚动表格的全部内容

javascript - 语言独立 : split a line with multiple repeating properties into multiple lines with each property only once

javascript - 如何选择 d3 中的前两个元素并对它们应用过渡？

javascript - JQuery Toggle 动画干扰 CSS 高度转换

html - 与 CSS 标志形状背景的链接

jquery - 像 Netflix 上的水平滚动图像

©2024 IT工具网  联系我们