vue 滚动条选中元素自动滚动到可视区域里居中显示

Posted 2023-03-23

参考技术A 模拟vant的Tab标签页的标签滚动效果
效果：选中元素，在滚动条的可视区域里面自动居中，头尾两端不用居中
vant效果： https://youzan.github.io/vant/#/zh-CN/tab

如果这篇文章对你有用,请给我点个赞,让我更加有动力写下去,谢谢

python-web自动化-滚动条操作

滚动条操作：当待操作的元素在页面可是区域外时，要将待操作的元素滚动到可视区域当中

步骤：
1.先找要将要操作的元素
element = driver.find_element_by_xxxx("XXXX")

2.再将元素滑动到可视区域；通过执行javaScript语句实现
driver.execute_script("arguments[0].scrollIntoView();",element)
#另外一种方式，scrollIntoViewIfneeded

3.再操作元素
element.XXX()

 

以下是移动的四种方式

1.移动到元素element对象的“底端”与当前窗口的“底部”对齐 driver.execute_script("arguments[0].scrollIntoView(false);",element)

2.移动到元素element对象的“顶端”与当前窗口的“顶部”对齐 driver.execute_script("arguments[0].scrollIntoView();",element)

3.移动到页面底部 driver.execute_script("window.scrollTo(0,document.body.scrollHeight)")

4.移动到页面顶部 driver.execute_script("window.scrollTo(0,document.body.scrollHeight，0)")

 

 

 

 

 

 

 

 

 

 

代码：百度首页输入内容，跳转页面；滑动到该页面底部，点击【下一页】

from selenium.webdriver.common.keys import Keys
from selenium import webdriver
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
import time
# 百度首页输入内容检索，跳转检索后页面，划动到该页面最下面的‘下一页’
driver = webdriver.Chrome()
driver.get(‘https://www.baidu.com/‘)
WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.XPATH,‘//input[@id="kw"]‘)))
driver.find_element_by_xpath(‘//input[@id="kw"]‘).send_keys(‘许嵩‘,Keys.ENTER) #输入文本并回车操作
time.sleep(2)
# 定位元素‘下一页’
ele = driver.find_element_by_xpath(‘//a[@class="n"]‘)
#根据‘下一页元素’，划动到页面最下面
driver.execute_script("arguments[0].scrollIntoView();",ele)
time.sleep(2)
# 点击【下一页】
ele.click()