如何在顯示前頁面時自動滾動到底部

Question

我們正在開發聊天應用程序，因爲我在內容div中顯示圖像，音頻和文本。

我們有頭div，內容div，頁腳div。內容div動態添加新數據我希望每次都顯示在底部。如果想要查看以前的數據，我想向下滾動查看。如何做到這一點使用jQuery

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

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

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

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

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

 
} 
 

 
function gotDirEntry(dirEntry) { 
 

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

 
function gotFileEntry(fileEntry) { 
 
\t return true; 
 
} 
 

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

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

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

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

 
} 
 

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

 
} 
 

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

 
// capture image from camera 
 

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

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

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

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

 
\t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t }); 
 
\t \t \t }); 
 
} 
 

 
function fail(error) { 
 
\t 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" 
 
\t id="hdrIdchat" data-position="fixed" data-tap-toggle="false" data-transition="none"> 
 
\t <a class="ui-btn ui-icon-arrow-l ui-btn-icon-left" onClick="navBack()"></a> 
 
\t <h1 id="lblHdrchat">Chat</h1> 
 

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

 
<div data-role="content"> 
 

 

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

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

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

Actual Result

Expected Result

Answer 1

看一看這個demo

header, 
footer { 
    flex: 0 0 auto; 
} 

main與內容一起高度增長。 Flex縮寫中的數字「1」表示容器中有多少可用空間分配給元素。在我們的情況下，主要是給予自由空間。該值的自動部分是flex元素的默認大小。我們希望自動爲所有靈活的孩子。

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

頁腳將永遠在內容下面，不管是什麼。

頁腳開始於底部

頁腳得到由內容下推

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