Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Taro.pageScrollTo无法滚动到指定位置 #8228

Closed
GoodbyeNJN opened this issue Dec 9, 2020 · 3 comments
Closed

Taro.pageScrollTo无法滚动到指定位置 #8228

GoodbyeNJN opened this issue Dec 9, 2020 · 3 comments
Labels
F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x

Comments

@GoodbyeNJN
Copy link
Contributor

相关平台

H5

复现仓库

https://github.com/GoodbyeNJN/pageScrollTo-bug
浏览器版本: Chrome 87.0.4280.88
使用框架: React

复现步骤

运行项目后在浏览器中打开，向下滚动一定距离后，点击顶部tab栏，页面无法滚动回去

期望结果

点击tab栏可以跳转到相应的位置，如 #6024 中的gif动画所示

实际结果

点击tab栏后毫无反应

环境信息

👽 Taro v3.0.18


  Taro CLI 3.0.18 environment info:
    System:
      OS: macOS 11.0.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
      Yarn: 1.22.4 - ~/.nvm/versions/node/v14.5.0/bin/yarn
      npm: 6.14.8 - ~/.nvm/versions/node/v14.5.0/bin/npm
    npmPackages:
      @tarojs/components: 3.0.18 => 3.0.18
      @tarojs/mini-runner: 3.0.18 => 3.0.18
      @tarojs/react: 3.0.18 => 3.0.18
      @tarojs/runtime: 3.0.18 => 3.0.18
      @tarojs/taro: 3.0.18 => 3.0.18
      @tarojs/webpack-runner: 3.0.18 => 3.0.18
      babel-preset-taro: 3.0.18 => 3.0.18
      eslint-config-taro: 3.0.18 => 3.0.18
      react: ^16.10.0 => 16.14.0
@taro-bot2 taro-bot2 bot added F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x labels Dec 9, 2020
@GoodbyeNJN
Copy link
Contributor Author

补充信息

  • 页面的dom结构：
<html style="font-size: 23.4375px;" class="hydrated">
  <head>
    <title>首页</title>
  </head>
  <body>
    <script type="text/javascript" src="/js/app.js"></script>
    <div class="taro-tabbar__container" id="container">
      <div class="taro-tabbar__panel">
        <div id="app" class="taro_router">
          <div>
            <div id="/pages/index/index" class="taro_page">
              <taro-view-core class="main hydrated">
                <taro-view-core class="margin hydrated"></taro-view-core>
                <taro-view-core class="sticky-top-container hydrated">
                  <taro-view-core class="titles hydrated" id="anchor-titles">
                    <taro-view-core class="title hydrated">title-1</taro-view-core>
                    <taro-view-core class="title hydrated">title-2</taro-view-core>
                    <taro-view-core class="title hydrated">title-3</taro-view-core>
                  </taro-view-core>
                </taro-view-core>
                <taro-view-core class="items-container hydrated">
                  <taro-view-core class="item hydrated" id="anchor-item-0"></taro-view-core>
                  <taro-view-core class="item hydrated" id="anchor-item-1"></taro-view-core>
                  <taro-view-core class="item hydrated" id="anchor-item-2"></taro-view-core>
                  <taro-view-core class="item hydrated" id="anchor-item-3"></taro-view-core>
                </taro-view-core>
              </taro-view-core>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
  • 问题定位：

taro/packages/taro-h5/src/api/scroll/index.js

Line 26 in 4dd5aa1

const el = document.querySelector('.taro-tabbar__panel') || window

taro/packages/taro-h5/src/api/scroll/index.js

Line 42 in 4dd5aa1

el.scrollTop = pos

  • 疑问：
  1. 项目中并没有用到tabBar，为何dom中会默认插入跟tabBar相关的节点？
  2. 代码中优先获取.taro-tabbar__panel元素，但浏览器开发者工具中显示，.taro-tabbar__panel元素无法被滚动，而html元素可以被滚动，如下图：
    浏览器开发者工具
    此处不同是否与疑问一中提到的有关？
  3. 修复该问题不难，但由于上述疑问，不敢轻易改动，怕影响原有功能，是否可以简单解释一下这一块代码的逻辑？

@GoodbyeNJN
Copy link
Contributor Author

关联 #8218

@taro-bot2 taro-bot2 bot mentioned this issue Dec 12, 2020
Closed
@Chen-jj Chen-jj mentioned this issue Apr 27, 2021
Closed
@Chen-jj
Copy link
Contributor

Chen-jj commented Apr 27, 2021

最新版本已经修复，可以升级后再试试

@Chen-jj Chen-jj closed this as completed Apr 27, 2021
@ZakaryCode ZakaryCode moved this to Done in H5 Apr 10, 2023
@ZakaryCode ZakaryCode added this to H5 Apr 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x
Projects
H5
Archived in project
Milestone
No milestone
Development

No branches or pull requests
2 participants
@GoodbyeNJN @Chen-jj