利用scrollintoview方法模拟聊天室收到新消息
这段时间再写一个聊天的功能，基本的原理已经通了，剩下的就是细化功能和实现了。原理通了不代表就能解决了这个问题，今天就遇到了一个小问题，就是在接收到新的消息以后，最新的消息不能显示在消息区域，而是跑到了最下面，需要手动划出来。这样的体验肯定是不行的，所以我们就在网上查找解决办法，有的使用js计算高度，然后页面滚动，这种方法虽然比较麻烦，但是确实能解决问题。但是今天又找到了一个更好的办法，就是利用scrollIntoView方法来实现。
首先说一下注意事项，scrollIntoView这个方法首先的一点是原生的js 的方法，所以就不能使用jQuery选择器来选择元素，否则就要报错了。看下面的截图：
所以我们就需要使用原生的选择器，来选择，其中document.querySelectorAll()就是一个很好的选择方法。还有就是，scrollIntoView()这个方法中是可以传参的，默认的参数是true。也就是说会把你选择的元素的顶部显示在你浏览器或者滚动区域的顶部。也就是头与头对齐。如果你传false的话，就是正好相反的，就是选择元素的底部显示在浏览器或者滚动区域的底部，也就是底与底对齐。废话不多说，直接看程序吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模仿聊天室滚动的方法</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#center{
width: 500px;
height: 600px;
border: 1px solid #CCCCCC;
overflow-y: scroll;
}
#center p{
width: 400px;
height: 100px;
border: 1px solid #CD235C;
}
#center p:nth-of-type(2n){
background: #CCCCCC;
}
</style>
</head>
<body>
<h1>利用scrollintoview方法来模仿聊天室滚动</h1>
<h2>利用button按钮来触发，模拟收到一条消息</h2>
<div id="center">
<p>叮叮叮，收到了0条新消息</p>
</div>
<button>收到一个信息</button>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("button").click(function(){
console.log("点击了按钮");
var length = $("#center p").length;
$("<p>叮叮叮，收到了"+length+"条新消息</p>").appendTo($("#center"));
document.querySelectorAll("p")[length].scrollIntoView(false);
//$("p").scrollIntoView(false);//报错,不能使用jQuery的选择器
});
</script>
</html>
利用下面的按钮来模拟接收到了新的消息，然后选择到最后的那个p标签，让他的底部与聊天窗口的底部对齐。就实现了这个功能！有什么不对的地方，欢迎讨论
利用scrollintoview方法模拟聊天室收到新消息的更多相关文章
- python tornado websocket 多聊天室（返回消息给部分连接者）
python tornado 构建多个聊天室, 多个聊天室之间相互独立, 实现服务器端将消息返回给相应的部分客户端! chatHome.py // 服务器端, 渲染主页 --> 聊天室建立web ...
- 利用netty简单实现聊天室
1.导入依赖包 <dependency> <groupId>io.netty</groupId> <artifactId>netty-all</a ...
- 基于Server-Sent Event的简单在线聊天室
Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时 ...
- 网络编程（学习整理）---2--（Udp）实现简单的控制台聊天室
1.UDP协议: 总结一下,今天学习的一点知识点! UDP也是一种通信协议,常被用来与TCP协议作比较!我们知道,在发送数据包的时候使用TCP协议比UDP协议安全,那么到底安全在哪里呢?怎么理解呢! ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- 基于Tomcat7、Java、WebSocket的服务器推送聊天室
http://blog.csdn.net/leecho571/article/details/9707497 http://blog.fens.me/java-websocket-intro/ jav ...
- SignalR 聊天室实例详解（服务器端推送版）
翻译自:http://www.codeproject.com/Articles/562023/Asp-Net-SignalR-Chat-Room (在这里可以下载到实例的源码) Asp.Net Si ...
- 使用Android网络编程实现简易聊天室
在Java中我们可以利用socket编程实现聊天室,在Android中也一样,因为Android完全支持JDK本身的TCP.UDP网络通信API.我们可以使用ServerSocket.Socket来建 ...
- Asp.Net SignalR - 简单聊天室实现
简单聊天室 使用持久链接类我们就可以做一些即时通讯的应用了,我使用Group做了一个简单的聊天室,先上图技术细节下面再讲 可以加入聊天室.创建聊天室.发送消息,下面就说说我是如何通过Group做出来的 ...
随机推荐
- Dubbo与Nginx区别
Dubbo的负载均衡已经是服务层面的了,和nginx的负载均衡还在http请求层面完全不同.至于二者哪个优秀,当然没办法直接比较. 涉及到负载均衡就涉及到你的业务,根据业务来选择才是最适合的. dub ...
- Trie 简介
一.Trie简介 在计算机科学中,Trie,又称字典树.前缀树.单词查找树或键树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎 ...
- [Swift]LeetCode64. 最小路径和 | Minimum Path Sum
Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...
- [Swift]LeetCode756. 金字塔转换矩阵 | Pyramid Transition Matrix
We are stacking blocks to form a pyramid. Each block has a color which is a one letter string, like ...
- Python 使用图灵机器人实现微信聊天功能
首先需要去图灵官网创建一个属于自己的机器人然后得到apikey. 一.自动与指定好友聊天 # -*- coding: utf-8 -*- """ Created at 2 ...
- Python 实现获取微信好友信息
最近用闲余时间看了点python,在网上冲浪时发现有不少获取微信好友信息的博客,对此比较感兴趣,于是自己敲了敲顺便记录下来. 一.使用 wxpy 模块库获取好友男比例信息和城市分布. # -*- co ...
- HBase篇--HBase常用优化
一.前述 HBase优化能够让我们对调优有一定的理解,当然企业并不是所有的优化全都用,优化还要根据业务具体实施. 二.具体优化 1.表的设计 1.1 预分区 默认情况下,在创建HBase表的时候会自 ...
- java基础(十三)-----详解内部类——Java高级开发必须懂的
可以将一个类的定义放在另一个类的定义内部,这就是内部类. 为什么要使用内部类 为什么要使用内部类?在<Think in java>中有这样一句话:使用内部类最吸引人的原因是:每个内部类都能 ...
- .NET Core微服务系列基础文章索引（目录导航Draft版）
一.为啥要写这个系列? 今年从原来的Team里面被抽出来加入了新的Team,开始做Java微服务的开发工作,接触了Spring Boot, Spring Cloud等技术栈,对微服务这种架构有了一个感 ...
- MongoDB exception:connection failed
根据http://www.runoob.com/mongodb/mongodb-window-install.html的教程配置了MongoDB,Mongod.exe配置为 --port 指令表明mo ...