在“到达"底部之前滚动HTML页面 [英] Scroll HTML page before it 'reaches' the bottom
本文介绍了在“到达"底部之前滚动HTML页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个聊天线程
当前操作是到达页面底部时向上滚动，使其始终位于页面底部.
What it does currently is when it gets to the bottom of the page it scrolls up so that it is always at the bottom of the page.
问题是，如您在图像中所看到的，它在到达页面底部之前就隐藏在表单后面.因此，我需要重新定义页面的底部:
The issue is that as you can see in the image, it hides behind the form before it reaches the bottom of the page. Hence, I need to redefine what the bottom of my page is:
我尝试过:
function scroll() {
window.scrollTo(0, document.body.scrollHeight + document.getElementById('form_id').offsetHeight);
};
但是，似乎从此函数之前的侦听功能起没有作用.
But it seems as though it has no effect from the function listen before this one.
这是我其余的代码:
<html>
<head>
<title>Chat Demo</title>
<style>
.top-bar {
background: #009E60;
position: relative;
overflow: hidden;
}
.top-bar::before {
content: "";
position: absolute;
top: -100%;
left: 0;
right: 0;
bottom: -100%;
opacity: 0.25;
background: radial-gradient(white, #009E60);
}
.top-bar > * {
position: relative;
}
.top-bar::before {
animation: pulse 1s ease alternate infinite;
}
@keyframes pulse {
from { opacity: 0; }
to { opacity: 0.5; }
}
* {
margin: 0;
padding: 0;
}
h1{
padding: 5px;
}
body {
font: 15px Helvetica, Arial;
}
form {
background: #009E60;
padding: 10px;
bottom: 0;
position: fixed;
width: 60%;
box-sizing: border-box;
}
form input {
padding: 5px;
width: 80%;
margin-right: 0.5%;
vertical-align: bottom;
font: 15px Helvetica, Arial;
}
form button {
width: 18.5%;
padding: 9px;
vertical-align: bottom;
}
ol {
padding-bottom: 100px;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages li {
padding: 5px 10px;
}
.left {
padding: 5px 10px;
background: -webkit-linear-gradient(left,rgba(215,229,228,1),rgba(255,255,255,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,255,255,0),rgba(215,229,228,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,255,255,0),rgba(215,229,228,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(215,229,228,1), rgba(255,255,255,0)); /*Standard*/
text-align: left;
}
.right {
padding: 5px 10px;
background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(228,215,229,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(228,215,229,1),rgba(255,255,255,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(228,215,229,1),rgba(255,255,255,0)); /*Fx 3.6-15*/
background: linear-gradient(to right,rgba(255,255,255,0),rgba(228,215,229,1)); /*Standard*/
text-align: right;
}
.module {
width: 60%;
margin: 20px auto;
}
</style>
</head>
<body>
<section class="module">
<div id="wrapper">
<div id="header">
<header class="top-bar">
<h1>Chat Demo</h1>
</header>
</div>
<div id="content">
<ol id="messages"></ol>
</div>
<div id="footer">
<form id="form_id" action = "#">
<input id = "user_input"/>
<button id="btn_id">send</button>
</form>
</div>
</div>
</section>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$("#form_id").submit(function(){
var value = $("#user_input").val();
if(value.length > 0 && value != "Default text"){
socket.emit('message from me', value);
$('#messages').append($('<li class="right">').text(value));
$('#user_input').val('');
scroll();
}
return false;
});
socket.on('message', function(msg){
$('#messages').append($('<li class="left">').text(msg));
});
function scroll() {
window.scrollTo(0, document.body.scrollHeight);
};
</script>
</body>
</html>
推荐答案
您好，只需在HTML页面中添加此CSS，您就会获得输出 div#footer {margin-top:10px; }
Hi just add this css in your html page you will get output div#footer { margin-top: 10px; }
这篇关于在“到达"底部之前滚动HTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
