C#使用Selenium Driver时页面上下滚动操作失效问题问询

问题原因 #

window.scrollTo 仅对全局根滚动容器生效，如果页面的可滚动区域是自定义DOM元素（比如设置了overflow: scroll的div容器），或存在浏览器兼容、页面滚动逻辑拦截的情况，就会出现脚本执行无报错但滚动不生效的问题。

解决方案 #

1. 兼容根容器滚动写法 #

部分浏览器的滚动载体是document.body而非document.documentElement，替换原JS语句为兼容写法即可：

public void ScrollToTheTop()
{
    if (this.driver is RemoteWebDriver remoteDriver)
    {
        IJavaScriptExecutor jex = remoteDriver;
        // 同时兼容两种根滚动容器
        jex.ExecuteScript("document.documentElement.scrollTop = 0; document.body.scrollTop = 0;");
    }
}

2. 自定义滚动容器处理 #

如果页面滚动区域是独立DOM元素，先在浏览器控制台执行document.scrollingElement获取实际滚动容器的选择器，再针对性操作元素的滚动属性：

public void ScrollToContainerTop(string containerSelector)
{
    if (this.driver is RemoteWebDriver remoteDriver)
    {
        IJavaScriptExecutor jex = remoteDriver;
        // 入参为滚动容器的CSS选择器，例如".main-content"、"#scroll-area"
        jex.ExecuteScript($"document.querySelector('{containerSelector}').scrollTop = 0");
    }
}

3. 特殊场景排查 #

• 执行滚动后打印当前滚动位置验证是否实际生效，排除固定头部视觉遮挡的误判：

  var scrollTop = jex.ExecuteScript("return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;");
  Console.WriteLine(scrollTop);
  

• 单页应用存在滚动拦截时，可改用带配置参数的滚动语句绕过拦截：

  jex.ExecuteScript("window.scrollTo({top: 0, left: 0, behavior: 'instant'})");
  

• 仍不生效时可尝试模拟按键操作，多次发送PageUp按键实现滚动到顶部。

内容的提问来源于stack exchange，提问作者marijuslau