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

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

2.24 js处理内嵌div滚动条的更多相关文章

  1. Selenium2学习（十八）-- js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相. ...

  2. Selenium2+python自动化26-js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.

  3. Selenium2+python自动化26-js处理内嵌div滚动条【转载】

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.

  4. Python3+Selenium3+webdriver学习笔记12（js操作应用：滚动条 日历 内嵌div）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记12(js操作应用:滚动条 日历 内嵌div)'''from ...

  5. 块和内嵌div和span

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 移动端开发利器vConsole.js,app内嵌H5开发时调试用

    vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...

  7. js函数内嵌函数的整体跳出 .

    stop=false; $.ajax({success:function(){ 这里面不能用return false跳出整个<script></script>,只能跳出该处的f ...

  8. JS中内嵌函数中this关键字的使用

    this关键字的使用 在嵌套函数中:和变量不同,this关键字没有作用域的限制,在嵌套函数的内部使用this关键字可以分为以下两种情况: 1)如果嵌套函数作为方法调用,那么this为当前的上下文. 2 ...

  9. selenium3 + python - js 内嵌滚动处理

    一.js内嵌html <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

随机推荐

  1. 数据结构与算法之PHP用邻接表、邻接矩阵实现图的广度优先遍历（BFS）

    一.基本思想 1)从图中的某个顶点V出发访问并记录: 2)依次访问V的所有邻接顶点: 3)分别从这些邻接点出发,依次访问它们的未被访问过的邻接点,直到图中所有已被访问过的顶点的邻接点都被访问到. 4) ...

  2. SpringBoot利用注解@Value获取properties属性为null

    参考:https://www.cnblogs.com/zacky31/p/8609990.html 今天在项目中想使用@Value来获取Springboot中properties中属性值. 场景:定义 ...

  3. application使用@符合问题：'@' that cannot start any token. (Do not use @ for indentation)

    在application配置文件中使用@出现异常: Exception in thread "main" while scanning for the next token fou ...

  4. [luogu P3384] [模板]树链剖分

    [luogu P3384] [模板]树链剖分 题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点 ...

  5. IDEA上传一个项目到github

    IDEA上传一个项目到github 只要3步 1. 2. 3. 4. 5.查看页面 上传成功... 详情:    https://blog.csdn.net/qq_27093465/article/d ...

  6. ActiveMQ producer 提交事务时突然宕机，会发生什么

    producer 在提交事务时,发生宕机,commit 的命令没有发送到 broker,这时会发生什么? ActiveMQ 开启事务发送消息的步骤: session.getTransactionCon ...

  7. CM+CDH安装教程（CentOS）

    一.简单介绍 CM:Cloudera Manager,Cloudera公司编写的一个CDH的管理后台,类似各CMS的管理后台. CDH:Cloudera’s distribution,includin ...

  8. 动态规划入门——数字三角形（Java）

    动态规划的概念对于新手来说枯燥难懂,就算看懂了,做题的时候依旧抓耳挠腮的毫无头绪,这些比较难理解的算法,还是需要根据例子来一步步学习和理解,从而熟练掌握,下面,咱们就通过一个简单的小例子来学习动态规划 ...

  9. js问题 项目问题

    项目问题1. js 中字符串替换函数var a = 'fajlfjal'a.replace(/b/,'a') // 不能直接改变a 而是返回替换后的值 2. vue 属性绑定中 class style ...

  10. 逆袭之旅DAY16.东软实训.Oracle.序列

    2018-07-12 14:07:44 序列 序列1.创建序列create sequence 序列名 [increment by n] ---步长 [start with n] ---序列的起始值 序 ...