您的位置：首页 > Web前端 > JavaScript

第十八节：JS控制网页内嵌滚动条的滚动

2017-09-06 17:48 681 查看

内嵌滚动条的HTML文件内容：

<!DOCTYPE html>

<meta charset="UTF-8"> 

<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="gdt_id" name="gdt_name" class="scroll">这是一个内嵌div:WebDiver 不能操作本地 Windows 控件，但对于浏览器上的控件也不是都可以操作的。比哪浏览器上的滚动条，虽然 WebDriver 提供操作浏览器的前进和后退按钮，但对于滚动条并没有提供相应用的方法。

那么在这种情况下就可以借助 JavaScript 方法来控制浏览器滚动条。WebDriver 提供了 execute_script()方法来执行 JavaScript 代码。一般用到操作滚动条的会两个场景：注册时的法律条文的阅读，判断用户是否阅读完成的标准是：滚动条是否拉到最下方。

 要操作的页面元素不在视觉范围，无法进行操作，需要拖动滚动条。用于标识滚动条位置的代码</div>

</body>

</html>

纵向滚动--scrollTop

1.FIREFOX浏览器通过JS纵向托动滚动条的代码为：

2.chrome浏览器通过JS纵向托动滚动条：

如下两种方法，滚动条未滚动

js = "var q=document.body.scrollTop=10000"

js = "window.scrollTo(10000,document.body.scrollHeight)"

通过classname--成功

横向滚动--scrollLeft

1.firefox浏览器通过JS横向托动滚动条

2.chrome浏览器通过JS横向托动滚动条

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航