zoukankan      html  css  js  c++  java
  • Selenium3+python3自动化(十九)--js处理内嵌div滚动条

    前言

    前面介绍过js解决浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候就得使用js了

    一、内嵌滚动条

    1.下面这张图就是内嵌div带有滚动条的样子

     2.页面源码如下:

    <!DOCTYPE html>
    <meta charset="GBK"> <!-- for HTML5 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <html>
    <head>
    <style type="text/css">
    
    div.scroll
    {
    background-color:#afafaf;
    500px;
    height:100px;
    overflow:auto;
    }
    
    
    </style>
    </head>
    
    <body>
    <p>玉不琢、不成器,人不学、不知道</p>
    <p>这是一个内嵌的div滚动条</p>
    <div id="test" name="xiahua" class="scroll">这是一个内嵌div:民国年间,九大家族镇守长沙,被称为“九门提督”。这九门势力庞大,外八行的无人不知,无人不晓,几乎所有冥器,流出长沙必然经过其中一家。
    1933年秋,一辆神秘鬼车缓缓驶入长沙火车站,九门之首“张大佛爷”张启山身为布防官,奉命调查始末。张启山与八爷齐铁嘴一路探访,发现长沙城外有一座疑点重重的矿山,一直被日本人窥伺。
    为破解矿山之谜,张启山求助同为九门上三门的戏曲名伶二月红,无奈二月红虽出身考古世家,却心系重病的妻子丫头,早已金盆洗手。张启山为了国家大义和手足之情,北上去往新月饭店为二月红爱妻求药。在北平,张启山邂逅了新月饭店的大小姐尹新月,并为尹新月连点三盏天灯,散尽家财。尹新月帮助张启山等人顺利返回长沙,二人暗生情愫。二月红爱妻病入膏肓,服药后不见好转,最终故去。
    二月红悲伤之余却意外发现家族祖辈与矿山亦有重大关联,于是振作精神,决定与张启山联手,解开矿山之谜zhegedancihenchanghenchangchangchangchangchanchanchanchangchangchangchancg</div>
    
    </body>
    </html>  

     二、纵向滚动 scrollTop

    1.这个是div的属性:<div id="test" name="xiahua" class="scroll">

    2.这里最简单的通过id来定位,使用的是element,返回一个对象,通过控制scrollTop的值来控制滚动条高度

    3.运行下面代码,观察页面是不是先滚动到底部,过5s再回到顶部

    4.通过name属性定位,使用的是elements,返回的是一个list对象,这里取第一个就可以了。

    # coding:utf-8
    from selenium import webdriver
    import time
    driver=webdriver.Chrome()
    driver.get("file:///C:/Users/Administrator/Desktop/1.html")
    #纵向底部
    js1='document.getElementById("test").scrollTop=10000'
    driver.execute_script(js1)
    time.sleep(5)
    #纵向顶部
    js2='document.getElementsByName("xiahua")[0].scrollTop=0'
    driver.execute_script(js2)  

     三、横向滚动 scrollLeft

    1.先通过id来定位,通过控制scrollLeft来控制滚动条高度

    # coding:utf-8
    from selenium import webdriver
    import time
    driver=webdriver.Chrome()
    driver.get("file:///C:/Users/Administrator/Desktop/1.html")
    #横向右侧
    js='document.getElementById("test").scrollLeft=10000'
    driver.execute_script(js)
    time.sleep(5)
    #横向左侧
    js='document.getElementsByClassName("scroll")[0].scrollLeft=0'
    driver.execute_script(js)
    # #纵向底部
    # js1='document.getElementById("test").scrollTop=10000'
    # driver.execute_script(js1)
    # time.sleep(5)
    # #纵向顶部
    # js2='document.getElementsByName("xiahua")[0].scrollTop=0'
    # driver.execute_script(js2)
    

      备注:js的定位语法与webdriver的八种定位语法很相似

    目前我已知的js的定位语法如下:

    getElementById() #单数,一个对象

    getElementsByName() #复数,对象list

    getElementsByClassName()

    getElementsByTagName()

    越努力,越幸运!!! good good study,day day up!!!
  • 相关阅读:
    重构引发的开发思考
    JS-正则表达式
    中文数字转数值
    框架-VuePress(未完)
    HTML-表格
    框架-Vue 2.*的补充
    框架-Vue Class Component tsx 支持(vue-tsx-support V2.2.0)
    CSS-flex
    框架-Vue Class Component 官方支持(vue 2.*、Vue Class Component、vue-property-decorator 9.0.2、vuex-class 0.3.2)
    vue-router:2020-03-26
  • 原文地址:https://www.cnblogs.com/canglongdao/p/13587061.html
Copyright © 2011-2022 走看看