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有很多小伙伴傻傻分不清楚。

有时候很多元素属性都一样时候,就可以用复数定位,取对应的第几个就可以了。

最新文章

  1. tomcat配置
  2. android中ProgressBar和ListView
  3. 【MySQL】分页优化
  4. maven run as(debug as)没有运行的选项时
  5. Mac上因磁盘格式导致gulp无限刷新问题
  6. 从手机获取图片让WebView支持本地上传图片
  7. 【Todo】深入PHP内核系列
  8. 二层安全之MAC Flooding解析与解决方法
  9. 如何使用Palette提取Bitmap的颜色
  10. Java Swing 树状组件JTree的使用方法(转)
  11. 内功心法 -- java.util.ArrayList&lt;E&gt; (4)
  12. 初识Vulkan
  13. wx小程序-列表详细页点击跳转!
  14. pandas处理时间序列(2):DatetimeIndex、索引和选择、含有重复索引的时间序列、日期范围与频率和移位、时间区间和区间算术
  15. 利用ngnix解决跨域问题
  16. Unity3D——SendMessage方法的使用
  17. 不用IDE写C#的Hello World
  18. bzoj1825: [JSOI2010]蔬菜庆典
  19. python3 判断大小端的一种方法
  20. Notes of Daily Scrum Meeting(11.14)

热门文章

  1. Git的各种状态
  2. 理解javascript封装
  3. [LeetCode] 201. Bitwise AND of Numbers Range ☆☆☆(数字范围按位与)
  4. Linux只下载不安装软件包
  5. anglar cli的 rxjs_1.of is not a function
  6. 回声UDP服务器端/客户端
  7. ubuntu16.10安装搜狗输入法
  8. 【基础】火狐和谷歌在Selenium3.0上的启动(二)
  9. 关于执行findbugs,checkstyle,jacoco插件检测代码,GitHook的脚本编写
  10. PHP socket以及http、socket、tcp、udp