jquery配合着niceScroll实现聊天消息

最新推荐文章于 2024-05-07 01:09:01 发布

RichBrian

最新推荐文章于 2024-05-07 01:09:01 发布

阅读量147

点赞数

分类专栏：前端滚动条文章标签：滚动条插件

本文链接：https://blog.csdn.net/qq_41725051/article/details/86622109

版权

前端滚动条专栏收录该内容

1 篇文章 0 订阅

订阅专栏

回忆

我是后端写java的，由于最近公司忙，所以我不得不搞搞前端的东西，结果第一件事情就是聊天窗口，大概效果就是这样子的（下图）

可能你们觉得就是找美工找两张图片当做背景就好了，领导会觉得很丑，我感觉领导的眼光我也老是不太明白，他们说这样子很好，行吧，随便吧，毕竟公司是你开的，你说咋样就咋样（因为我对前端的东西并不是太了解，可能看了我写的代码会觉得很蠢很笨，随便吧，我接受别人的批评，但是不是这样子的）

直接告诉怎么写的，不讲一些花里胡哨的，复制代码就能用

我直接说几行代码，首先你想要在哪个div上加滚动条，直接引js（百度网盘分享，看下面，源代码），先引jquery在引这个滚动条插件，在页面加载的时候在$(function(){})里面写$("#left_bj").niceScroll({
       cursorborder:" ",
       cursorcolor:"#18cde4",
       boxzoom:false,
       autohidemode:"scroll"
   });这个方法有很多的参数具体去参考别人的文章，我这里直接复制的话，感觉有点小过分（地址：https://www.cnblogs.com/jinqi79731/p/nicescroll.html），然后当div里面内容超出他就会给你往上滚动，

接下来配合着jquery里面的$("#left_bj").animate({scrollTop : newDiv.offsetTop}, "slow");这个方法参考jquery的api去看。这个方法就是你内容超出，他就会给你显示到超出的地方，我的js里面有一点就是当聊天窗口超出整个div一半的时候我就会在上面遮上一层阴影，具体你们等会看代码吧

总结：不管怎么样，多学点知识没有坏处。

源代码地址：链接：https://pan.baidu.com/s/1A0gOotQ1bFNtBiosw_tVxw
提取码：ipfp