php滚动条怎么用,如何让滚动条自动滚到最底部
让滚动条自动滚到最底部的方法:首先在DIV的底部添加一隐藏元素“element”;然后调用“element.scrollIntoView()”方法;最后使元素滚动到可视区域即可。
如何让滚动条自动滚到最底部?
让DIV中的垂直滚动条自动滚到最底部
在聊天窗口中当消息增多超过消息窗体DIV的高度时就会出现滚动条,但此时滚动条在绝大多数浏览器中都始终位于DIV的顶部,这样就会导致之后的消息看不见,必须往下拖动滚动条才能看到新的消息,如果做到当出现滚动条时,滚动条始终位于DIV的底部呢?
方式一:设置DIV的scrollTop=scrollHeight;
方式二:在DIV的底部添加一隐藏元素element,然后调用element.scrollIntoView()。这里的scrollIntoView是原生的方法,通过名称我们就不难发现该方法用来使元素滚动到可视区域。
为了简单起见直接将两种方式放在一起。
div{margin:0px;padding:0px;}
#main{width:380px;height:102px;overflow-y:auto;border:1px solid #ddd;padding:0 10px 0 10px;}
#content{width:350px;line-height:20px;}
window.οnlοad=function(){
var i=1;
var hid=document.getElementById('msg_end');//隐藏在消息框下面的元素
var btn=document.getElementById('btnSend');//添加消息的按钮
var cont=document.getElementById('content');//消息框
var mai=document.getElementById('main');
btn.οnclick=function(){
cont.innerHTML+='消息内容'+i+'
';
//hid.scrollIntoView(false);//方式1通过调用隐藏元素的scrollIntoView()方法使其可见
//mai.scrollTop=mai.scrollHeight;//方式2通过设置滚动高度
i++;
}
}
效果如下,滚动条始终最底部
更多相关知识,请访问PHP中文网!
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
专题推荐:滚动条
php滚动条怎么用,如何让滚动条自动滚到最底部相关推荐
- 11-vue移动端项目(小智机器人聊天使用websocket协议使用socket.io客户端第三方包, 让div滚动条自动滚到最底部)
小智同学 01 - 创建组件 创建组件 & 创建路由 设置入口 02 - 完成静态页面 头部标题 聊天区域 设置内容高度时会出现一个问题: 由于不同的手机型号的高度是不一样的,但是聊天区域的高 ...
- vue 实现数据滚动显示_vue实现动态添加数据滚动条自动滚动到底部的示例代码...
在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部.这时我找到网上有个插件 vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383 ...
- html5自动出现滚动条,关于HTML中的滚动条/去掉滚动条问题本
html 怎么去掉网页的滚动条 body里面加 body{ overflow:scroll; overflow-x:hidden; } 这个是y轴有滚动条,x轴没有.如果是都要滚动条就去掉overfl ...
- 滚动条如何设置样式和滚动条悬浮显示与隐藏
文章目录 一.滚动条如何设置样式 1:滚动条的默认样式(如下图) 1:html代码 2:css代码 3:效果图 2:CSS设置滚动条的属性(重点) 3:设置滚动条的例子 1:css代码(在第1步的基础 ...
- java 滚动条的事件_[Java教程]jquery如何判断滚动条滚到页面底部并执行事件
[Java教程]jquery如何判断滚动条滚到页面底部并执行事件 0 2016-04-27 10:00:13 本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素, ...
- C语言窗口水平滚动条,C语言Windows程序设计滚动条
滚动条由滚动滑块以及两端的滚动箭头组成, 滚动条的作用是当需要显示的内容超过窗口客户区大小时提供上下/左右的翻页使用户能够完整的阅读显示信息 Windows滚动条介绍 滚动条由滚动滑块以及两端的滚动箭 ...
- html5滚动条样式修改,css修改滚动条样式
在css中怎样改变滚动条的样式 /*IE滚动条颜色设置*/body {scrollbar-arrow-color:#f2f2f3;/*上下箭头*/scrollbar-track-color:#1589 ...
- html自定义滚动条不占位,如何实现滚动条在各浏览器中不占用布局
在一般浏览器中,当内容超出容器时,如果不是overflow:hidden,通常都会出现滚动条,由于滚动条并不是浮在布局内容之上,所以通常会带来两个问题: 1,容器内部内容宽度固定,恰好撑满,此时出现滚 ...
- 1.4_17 Axure RP 9 for mac 高保真原型图 - 案例16 【动态面板-滚动条6】手动制作滚动条
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 手动制作滚动条 的原理 2. 掌握 鼠标悬停 在本案例中的用法 一.成品效果 Axure ...
最新文章
- sklearn中cross_val_score、cross_val_predict的用法比较
- SAP MM 中级之事务代码MICN的相关逻辑
- Centos调出图形化的网络管理
- qint64转为qstring qt_Qt中Qstring,char,int,QByteArray之间到转换
- 深入理解Magento – 第六章 – 高级Magento模型
- js如何提高for循环的效率_如何提高rv减速机的散热效率
- centos7 安装mysql8_CentOS 下 MySQL 8.0 安装部署,超详细!
- 复杂场景下,如何用AI技术做地图?
- e7用什么主板_主板当中的纽扣电池有什么用?电池没电了会怎样?
- 用python实现搜索树_二叉搜索树的python实现
- 集成显卡连接显示器的线跟独立显卡的不同么,分别叫什么
- 查看 gmail 办法_如何在Gmail对话主题上查看新电子邮件
- 复兴号为什么不能超载?_接下来:什么都没有? 信息超载如何影响我们的大脑。...
- 微信ios签名报错config:fail
- 怎么查看linux自动校验时间,linux校验时间
- 原材料入库控制的三个问题
- 网易免费企业邮箱MX验证,如何通过验证?(阿里云域名篇)。
- 智能座舱域控制器技术发展趋势分析
- 如何写一个完整的django网站:配置环境啥的不讲(python+mysql+html相关) 叁
- 卸载Oracle(完全手动)
热门文章
- 完美解决:Python在安装XXX包时,报错拒绝访问的错误,PermissionError: [WinError 5] 拒绝访问。: ‘d:\\anaconda3\\lib\\site-package
- logistic map
- 百度云api调用时出现“Max retries exceeded with url”的解决
- LOJ6356四色灯
- 520你表白了没?看看程序员们的花式表白吧!
- C++实现工厂方法模式Factory Method Pattern
- 携号转网查询接口是如何识别手机号的?
- 李宁品牌发展史——从“本土少年”到国际国潮“明星”
- webM文件解析--基于Matroska和EBML
- 详细解析张雪峰老师对计算机专业的评价“进可攻,退可守”--【职场篇】