2.24 js处理内嵌div滚动条
2024-10-15 03:05:02
2.24 js处理内嵌div滚动条
前言
前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦。
一、内嵌滚动条
1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相。
2.页面源码如下:(老规矩:copy下来,用文本保存下来,后缀改成.html,用浏览器打开)
<!DOCTYPE html>
<meta charset="UTF-8"> <!-- for HTML5 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<style type="text/css">
div.scroll
{
background-color:#afafaf;
width:500px;
height:100px;
overflow:auto;
}
</style>
</head> <body>
<p>个人微信公众号:yoyoketang</p>
<p>这是一个内嵌的div滚动条</p>
<div id="yoyoketang" name="yoyo" class="scroll">这是一个内嵌div:民国年间,九大家族镇守长沙,被称为“九门提督”。这九门势力庞大,外八行的无人不知,无人不
晓,几乎所有冥器,流出长沙必然经过其中一家。1933年秋,一辆神秘鬼车缓缓驶入长沙火车站,九门之首“张大佛爷”张启山身为布防官,奉命调查始末。张启山与八爷齐铁嘴一路探访,发现长沙城外有一座疑点重重的矿山,一直被日本人窥伺。
为破解矿山之谜,张启山求助同为九门上三门的戏曲名伶二月红,无奈二月红虽出身考古世家,却心系重病的妻子丫头,早已金盆洗手。张启山为了国家大义和手足之情,北上去往新月饭店为二月红爱妻求药。在北平,张启山邂逅了新月饭店的大小姐尹新月,并为尹新月连点三盏天灯,散尽家财。尹新月帮助张启山等人顺利返回
长沙,二人暗生情愫。二月红爱妻病入膏肓,服药后不见好转,最终故去。二月红悲伤之余却意外发现家族祖辈与矿山亦有重大关联,于是振作精神,决定与张启山联手,解开矿山之谜zhegedancihenchanghenchangchangchangchangchanchanchanchangchangchangchancg
</div>
</body>
</html>
二、纵向滚动
1.这个是div的属性:<div id="yoyoketang" name="yoyo" class="scroll">
2.这里最简单的通过id来定位,通过控制 scrollTop的值来控制滚动条高度
3.运行下面代码,观察页面是不是先滚动到底部,过五秒再回到顶部。(get里面地址是浏览器打开该页面的地址)
三、横向滚动
1.先通过id来定位,通过控制scrollLeft的值来控制滚动条高度
四、用class属性定位
1.js用class属性定位,返回的是一个list对象,这里取第一个就可以了。
2.这里要注意了,element和elements有很多小伙伴傻傻分不清楚。
有时候很多元素属性都一样时候,就可以用复数定位,取对应的第几个就可以了。
最新文章
- tomcat配置
- android中ProgressBar和ListView
- 【MySQL】分页优化
- maven run as(debug as)没有运行的选项时
- Mac上因磁盘格式导致gulp无限刷新问题
- 从手机获取图片让WebView支持本地上传图片
- 【Todo】深入PHP内核系列
- 二层安全之MAC Flooding解析与解决方法
- 如何使用Palette提取Bitmap的颜色
- Java Swing 树状组件JTree的使用方法(转)
- 内功心法 -- java.util.ArrayList<;E>; (4)
- 初识Vulkan
- wx小程序-列表详细页点击跳转!
- pandas处理时间序列(2):DatetimeIndex、索引和选择、含有重复索引的时间序列、日期范围与频率和移位、时间区间和区间算术
- 利用ngnix解决跨域问题
- Unity3D——SendMessage方法的使用
- 不用IDE写C#的Hello World
- bzoj1825: [JSOI2010]蔬菜庆典
- python3 判断大小端的一种方法
- Notes of Daily Scrum Meeting(11.14)
热门文章
- Git的各种状态
- 理解javascript封装
- [LeetCode] 201. Bitwise AND of Numbers Range ☆☆☆(数字范围按位与)
- Linux只下载不安装软件包
- anglar cli的 rxjs_1.of is not a function
- 回声UDP服务器端/客户端
- ubuntu16.10安装搜狗输入法
- 【基础】火狐和谷歌在Selenium3.0上的启动(二)
- 关于执行findbugs,checkstyle,jacoco插件检测代码,GitHook的脚本编写
- PHP socket以及http、socket、tcp、udp