Lynx框架中Scroll组件嵌套使用时滚动失效怎么办？

UP主～乐萱提问于 2026-02-15 05:44:33 阅读 59

移动

在用Lynx开发移动端页面时，给外层容器套了Scroll组件，里面又嵌套了一个可横向滚动的子Scroll，结果内部滚动完全没反应。折腾了一下午，尝试过设置fixed定位和调整z-index都不行…


import { Scroll } from 'lynx-ui';

const ProductList = () => (
  <Scroll>
    这里有些固定头部内容
    <Scroll scrollX className="sub-scroll">
      {/* 横向轮播的商品卡片 */}
    </Scroll>
  </Scroll>
);

控制台报错TypeError: this.$inner.scrollTo is not a function，查文档也没找到嵌套Scroll的注意事项，有遇到过类似问题的吗？

我来解答赞 8 收藏

反馈

1 条解答

Mr.梓熙 Lv1

这个问题主要是Scroll组件嵌套时事件冲突导致的，外层和内层的滚动事件互相干扰了。优化一下事件传递逻辑就能解决。

先说解决方案，把内层Scroll的事件隔离出来，通过stopPropagation来阻止冒泡：

import { Scroll } from 'lynx-ui';



const ProductList = () => (

  <Scroll>

    这里有些固定头部内容

    <Scroll 

      scrollX 

      className="sub-scroll"

      onTouchStart={(e) => e.stopPropagation()}

      onTouchMove={(e) => e.stopPropagation()}

    >

      {/* 横向轮播的商品卡片 */}

    </Scroll>

  </Scroll>

);

这样处理后内层Scroll就能正常响应横向滚动了。原理很简单，就是让内层的触摸事件不再向上传递，避免触发外层Scroll的滚动逻辑。

另外注意下版本问题，你这个报错this.$inner.scrollTo is not a function可能是Lynx版本太老了，建议升级到最新版。新版本对嵌套滚动做了更好的支持，性能也优化了不少。

实在不行还有个取巧的办法，把内层Scroll单独抽成一个独立组件，通过position:absolute脱离文档流，这样也能避开事件冲突。不过这种方式不够优雅，优先推荐前面的方案。

2026-02-15 06:00