好得很程序员自学网
  • 首页
  • 后端语言
    • C#
    • PHP
    • Python
    • java
    • Golang
    • ASP.NET
  • 前端开发
    • Angular
    • react框架
    • LayUi开发
    • javascript
    • HTML与HTML5
    • CSS与CSS3
    • jQuery
    • Bootstrap
    • NodeJS
    • Vue与小程序技术
    • Photoshop
  • 数据库技术
    • MSSQL
    • MYSQL
    • Redis
    • MongoDB
    • Oracle
    • PostgreSQL
    • Sqlite
    • 数据库基础
    • 数据库排错
  • CMS系统
    • HDHCMS
    • WordPress
    • Dedecms
    • PhpCms
    • 帝国CMS
    • ThinkPHP
    • Discuz
    • ZBlog
    • ECSHOP
  • 高手进阶
    • Android技术
    • 正则表达式
    • 数据结构与算法
  • 系统运维
    • Windows
    • apache
    • 服务器排错
    • 网站安全
    • nginx
    • linux系统
    • MacOS
  • 学习教程
    • 前端脚本教程
    • HTML与CSS 教程
    • 脚本语言教程
    • 数据库教程
    • 应用系统教程
  • 新技术
  • 编程导航
    • 区块链
    • IT资讯
    • 设计灵感
    • 建站资源
    • 开发团队
    • 程序社区
    • 图标图库
    • 图形动效
    • IDE环境
    • 在线工具
    • 调试测试
    • Node开发
    • 游戏框架
    • CSS库
    • Jquery插件
    • Js插件
    • Web框架
    • 移动端框架
    • 模块管理
    • 开发社区
    • 在线课堂
    • 框架类库
    • 项目托管
    • 云服务

当前位置:首页>CMS系统>Dedecms
<tfoot draggable='sEl'></tfoot>

html页面大怎么加滑动 鼠标上下滑动变成页面变大

很多站长朋友们都不太清楚html页面大怎么加滑动,今天小编就来给大家整理html页面大怎么加滑动,希望对各位有所帮助,具体内容如下:

本文目录一览: 1、 html页面大了要出现滚动条,是加哪个标签? 2、 html怎么设置滚动图片? 3、 HTML怎么添加滚动条 html页面大了要出现滚动条,是加哪个标签?

要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息。

聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条。

网上有资料介绍说通过设置scrollTop属性来控制滚动条位置,具体可参见:

但同样的代码拿到我这里却完全失效,又仔细查了下资料说XHTML标准下scrollTop的值恒为0,解决办法是使用document.documentElement.scrollTop代替document.body.scrollTop,讲了半天所解决的是整个页面的滚动条。这个方法我是用不了了,因为不是框架结构,所以不可能用body的滚动条控制浏览信息。

网上关于这个问题的资料很少,连CSDN上也说没有办法。

不死心,后来查DHTML手册得知DIV有个doScroll方法可以用来模拟滚动条点击,但很令人失望,到了我这里又是完全失效,难道又不被XHTML支持?

最后终于被我找到三种控制DIV内容滚动的方法:

方法一:

使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置

<script language="javascript1.2" type="text/javascript">

function onGetMessage(context)

{

msg.innerHTML+=context;

msg_end.click();

}

</script>

<div style="width:500px;overflow:auto">

<div id="msg" style="overflow:hidden;width:480px;"></div>

<div><a id="msg_end" name="1" href="#1">nbsp</a></div>

</div>

方法二:

利用DIV的scrollIntoView方法,将最底端滚动到可视位置 [list=1]<script

language="javascript1.2"

type="text/javascript">

function onGetMessage(context)

{

msg.innerHTML+=context;

msg_end.scrollIntoView();

}

</script>

<div style="width:500px;overflow:auto">

<div id="msg" style="overflow:hidden;width:480px;"></div>

<div id="msg_end" style="height:0px; overflow:hidden"></div>

</div>

方法三:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="keywords" content="滚动条, scrollbar, 页面底部, 聊天窗口, " />

<meta name="description" content="有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部。" />

<title>将滚动条(scrollbar)保持在最底部的方法 - 滚动条, scrollbar, 页面底部, 聊天窗口, </title>

</head>

<body>

<div id="example">

<h3 id="example_title">将滚动条(scrollbar)保持在最底部的方法</h3>

<div id="example_main">

<!--************************************* 实例代码开始 *************************************-->

<script type="text/javascript">

function add()

{

var now = new Date();

var div = document.getElementById('scrolldIV');

div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';

div.scrollTop = div.scrollHeight;

}

</script>

<span class="notice">请点击“插入一行”按钮,插入最新信息,当出现滚动条时,滚动条将自动保持在底部。</span><br />

<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;">

</div>

<input type="button" value="插入一行" onclick="add();">

<!--************************************* 实例代码结束 *************************************-->

</div>

</div>

</body>

</html>

方法4:

这个比较复杂也比较灵活一点,就是利用DIV+JS+图片构造一个滚动条,当然了图片是怎么好看怎么用了。

主要部分就是外层的DIV加个overflow:hidden属性,通过js代码调整内层DIV的margin-left和margin-top来控制内容的滚动,由于上面两种方法已经可以满足需求,所以这种方法没具体做深究,有兴趣的可以试一下

html怎么设置滚动图片?

方案一:直接使用HTML的滚动标签 marquee ,把图片放入滚滚标签内部,代码如下:

<marquee>

<img src='/data/upload/help/202211/19/f3ccdd27d2000e3f9255a7e3e2c48800.jpg'>

<img src='/data/upload/help/202211/19/156005c5baf40ff51a327f1c34f2975b.jpg'>

<img src='/data/upload/help/202211/19/799bad5a3b514f096e69bbc4a7896cd9.jpg'>

<img src='/data/upload/help/202211/19/d0096ec6c83575373e3a21d129ff8fef.jpg'>

</marquee>

方案二:使用第三方插件,比如swiper.js,

插件

HTML怎么添加滚动条

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<body>标签中,输入html代码:<div style="overflow: scroll">hello world!</div>。

3、浏览器运行index.html页面,此时成功在html中指定的div中添加了滚动条。

关于html页面大怎么加滑动的介绍到此就结束了,不知道本篇文章是否对您有帮助呢?如果你还想了解更多此类信息,记得收藏关注本站,我们会不定期更新哦。

查看更多关于html页面大怎么加滑动 鼠标上下滑动变成页面变大的详细内容...

声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did123018
更新时间:2022-11-21   阅读:56次

上一篇: 怎么用html文本框的值 html输出文本框怎么写

下一篇:html怎么把图片移到中心 html怎么把图片放到指定位置

相关资讯

最新资料更新

  • 1.DEDECMS 留言薄模块的使用方法
  • 2.将百度编辑器(Ueditor)整合到dedecms中的方法
  • 3.dedecsm模板中首页如何实现分页的三种方法比较分析
  • 4.dedecms获取图片集多张图片实现方法(循环输出)
  • 5.dedecms网站栏目增加缩略图的方法
  • 6.DEDECMS最为常用的分页标签及分页样式代码
  • 7.织梦DedeCMS默认文件夹重命名的方法
  • 8.dedecms返回列表页功能的标签代码
  • 9.织梦DedeCMS的4个常用函数介绍
  • 10.如何让织梦DedeCMS的TAG标签按栏目显示 只显示当前栏目标签
  • 11.dede网站内容页如何调取栏目页标题及关键字组合为seo标题
  • 12.dedecms实现调用所有顶级栏目下最新文章的方法
  • 13.dedecms专题模板应用分析及解决方案
  • 14.dedecms网页模板编写介绍
  • 15.DedeCms批量写入数据的函数分析
  • 16.织梦dedecms两种内容模型的文档进行合并的方法
  • 17.织梦CMS提示DedeTag Engine Create File False错误的解决办法总结
  • 18.织梦dedecms使用weight排序无效的解决方法
  • 19.织梦dedecms在模板页面中实现会员登录退出状态显示的方法
  • 20.详解织梦DEDECMS站点内容自动更新到新浪微博的方法

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网」
[ SiteMap ]