天天看點

js中scrollIntoView()的用法

一. 什麼是scrollIntoView

scrollIntoView是一個與頁面(容器)滾動相關的API

二. 如何調用

element.scrollIntoView()  參數預設為true      

參數為true:調用該函數,頁面發送滾動,使element的頂部與視圖(容器)頂部對齊

參數為false:使element的底部與視圖(容器)底部對齊

三. 使用場景

在selenium+webdriver(python語言)做元素定位時,有的元素在頁面的不可見區域,這時候需要scrollIntoView()将其拖動到可見區域,代碼如下:

from selenium import webdriver

#初始化chromedriver
driver = webdriver.Chrome()

#設定隐性等待時間8s
driver.implicitly_wait(8)

#打開百度首頁
driver.get("https://www.baidu.com/")

#視窗最大化
driver.maximize_window()

#使用xpath定位輸入框,并輸入内容 python
driver.find_element_by_xpath("//input[@id=\'kw\']").send_keys("selenium")

#定位并點選 百度一下 的送出按鈕
driver.find_element_by_xpath("//input[@id=\'su\']").click()

#通過CSS定位到第10條搜尋結果
target = driver.find_element_by_css_selector("div[id=\'10\'] h3 a")

#利用js将定位到的元素拖動到可見區域
driver.execute_script("arguments[0].scrollIntoView();", target)

      

看到的情況是,我定位到的元素的标題和浏覽器頂部對齊了,效果不太好

js中scrollIntoView()的用法

這時隻要把scrollIntoView()改成scrollIntoView(false)就可以解決了

#利用js将定位到的元素拖動到可見區域
driver.execute_script("arguments[0].scrollIntoView(false);", target)      
js中scrollIntoView()的用法

參考文章

https://blog.csdn.net/hyl94/article/details/77472154

https://www.cnblogs.com/laoniaofly/p/5954202.html