嘿，这个问题我太有经验了！当页面同时存在浏览器自带滚动条和自定义滚动容器时，关键是要精准定位到你要操作的那个滚动容器DOM元素，而不是默认操作全局的window对象。针对你图里那个带黄色箭头的中间自定义滚动条，我分两种常用场景给你讲解决方案：

• 先定位目标容器：打开浏览器开发者工具（按F12），用左上角的元素选择器点击那个带自定义滚动条的区域，找到对应的DOM元素。这类容器一般会设置overflow: auto或overflow: scroll的CSS属性，你可以在Styles面板里确认这一点。
• 然后执行滚动操作：
  • 滚动到指定像素位置：在控制台输入类似这样的代码（把选择器换成你找到的容器选择器）：

    // 垂直向下滚动150px
    document.querySelector('.custom-scroll-container').scrollTop += 150;
    // 水平向右滚动的话用scrollLeft
    document.querySelector('.custom-scroll-container').scrollLeft += 100;
    

  • 滚动到容器内的某个子元素：如果想直接滚到容器里的某个元素，用scrollIntoView方法：

    // 平滑滚动到子元素位置，block: 'start'表示让元素顶部对齐容器顶部
    document.querySelector('.custom-scroll-container').querySelector('.target-child').scrollIntoView({behavior: 'smooth', block: 'start'});
    

  • 手动调试更直观的方法：在Elements面板里找到该容器元素，在右侧的Properties面板里找到scrollTop属性，直接修改数值，就能实时看到容器滚动的效果。

如果是用自动化工具来操作这个滚动条，核心思路还是先定位容器，再通过JS执行滚动：

• 第一步：定位目标滚动容器

  # 用Python的Selenium举例，用CSS选择器定位容器
  from selenium import webdriver
  from selenium.webdriver.common.by import By
  
  driver = webdriver.Chrome()
  scroll_container = driver.find_element(By.CSS_SELECTOR, ".custom-scroll-container")
  

• 第二步：执行滚动操作
  • 滚动指定像素：

    # 垂直向下滚动200px
    driver.execute_script("arguments[0].scrollTop += 200;", scroll_container)
    

  • 滚动到指定子元素：

    target_element = scroll_container.find_element(By.CSS_SELECTOR, ".target-child")
    driver.execute_script("arguments[0].scrollIntoView(true);", target_element)
    

  • 注意：别用driver.execute_script("window.scrollTo(...)")，这个是操作浏览器的全局滚动条，不是你要的自定义滚动容器。

有些页面用了Perfect Scrollbar、Custom Scrollbar这类第三方库来做自定义滚动条，这时候直接操作scrollTop可能不生效，需要调用库提供的API：

• 比如Perfect Scrollbar，你可以这样操作：

  // 先获取实例，然后调用scrollTo方法
  const ps = new PerfectScrollbar('.custom-scroll-container');
  ps.scrollTo(0, 200); // 参数是x, y轴的滚动距离
  

  具体API要看你用的库的官方文档来调整。

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