14-js处理内嵌div滚动条 · Python / Linux / Mysql / 软件测试等等

[TOC] 前言前面有篇专门用js解决了浏览器滚动条的问题，生活总是多姿多彩，有的滚动条就在页面上，这时候又得仰仗js大哥来解决啦。 ## 一、内嵌滚动条 1. 下面这张图就是内嵌div带有滚动条的样子，记住它的长相。 ![Snipaste_2020-08-17_17-39-17.png](https://i.loli.net/2020/08/17/CN9xP6sBRopylqt.png) 2. 页面源码如下： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div.scroll{ background-color:orange; width:500px; height:100px; overflow:auto; } </style> </head> <body> <p>微信公众号</p> <p>这是一个内嵌的div滚动条</p> <div id="yoyotang" name="yoyo" class="scroll">这是一个内嵌div:民国年间，九大家族镇守长沙，被称为“九门提督”。这九门势力庞大，外八行的无人不知，无人不晓，几乎所有冥器，流出长沙必然经过其中一家。 1933年秋，一辆神秘鬼车缓缓驶入长沙火车站，九门之首“张大佛爷”张启山身为布防官，奉命调查始末。张启山与八爷齐铁嘴一路探访，发现长沙城外有一座疑点重重的矿山，一直被日本人窥伺。为破解矿山之谜，张启山求助同为九门上三门的戏曲名伶二月红，无奈二月红虽出身考古世家，却心系重病的妻子丫头，早已金盆洗手。张启山为了国家大义和手足之情，北上去往新月饭店为二月红爱妻求药。在北平，张启山邂逅了新月饭店的大小姐尹新月，并为尹新月连点三盏天灯，散尽家财。尹新月帮助张启山等人顺利返回长沙，二人暗生情愫。二月红爱妻病入膏肓，服药后不见好转，最终故去。二月红悲伤之余却意外发现家族祖辈与矿山亦有重大关联，于是振作精神，决定与张启山联手，解开矿山之谜zhegedancihenchanghenchangchangchangchangchanchanchanchangchangchangchancg</div> </body> </html> ``` <br /> ## 二、纵向滚动 1. 这个是div的属性： 2. 这里最简单的通过id来定位，通过控制 scrollTop的值来控制滚动条高度 3. 运行下面代码，观察页面是不是先滚动到底部，过五秒再回到顶部。（get里面地址是浏览器打开该页面的地址） ``` # coding:utf-8 from selenium import webdriver import time driver = webdriver.Chrome() driver.get("G:/py/selenium/test/selenium_day03/js_div.html") # 纵向底部 js1 = 'document.getElementById("yoyotang").scrollTop=10000' driver.execute_script(js1) time.sleep(5) # 纵向顶部 js1 = 'document.getElementById("yoyotang").scrollTop=0' driver.execute_script(js1) ``` <br /> ## 三、横向滚动 1 .先通过id来定位，通过控制scrollLeft的值来控制滚动条高度 ``` # coding:utf-8 from selenium import webdriver import time driver = webdriver.Chrome() driver.get("G:/py/selenium/test/selenium_day03/js_div.html") # 横向右侧 js2 = 'document.getElementById("yoyotang").scrollLeft=10000' driver.execute_script(js2) time.sleep(5) # 横向左侧 js2 = 'document.getElementById("yoyotang").scrollLeft=0' driver.execute_script(js2) ``` <br /> ## 四、用class属性定位 1. js用class属性定位，返回的是一个list对象，这里取第一个就可以了。 2. 这里要注意了，element和elements有很多小伙伴傻傻分不清楚。 ``` # coding:utf-8 from selenium import webdriver import time driver = webdriver.Chrome() driver.get("G:/py/selenium/test/selenium_day03/js_div.html") # 获取的class返回的是list对象，取list的第一个 js3 = 'document.getElementsByClassName("scroll")[0].scrollTop=10000' driver.execute_script(js3) time.sleep(5) # 控制横向滚动条位置 js4 = 'document.getElementsByClassName("scroll")[0].scrollLeft=10000' driver.execute_script(js4) ``` 有时候很多元素属性都一样时候，就可以用复数定位，取对应的第几个就可以了