React.js 当 scrollTop 为 0 时,检测我们在第一部分,使用 react-full-page npm

美贞元

对不起,奇怪的标题和我糟糕的英语。

我正在使用一个包,react-full-page

试图弄清楚如何使用“beforeChange/afterChange”道具。

<FullPage>
    <Slide>
       A
    </Slide>
    <Slide>
       B
    </Slide>
</FullPage>
<button>scrollToTop</button>

当我单击按钮时,页面会上升到 scrollTop === 0,但是 react-full-page 认为我仍然在最后一张幻灯片上,即使滚动在顶部。我想我可以用 beforeChange 做一些事情。但是不知道怎么用。。。

文档说 beforeChange 和 afterChange 都将接收一个对象作为参数,例如:

{
  "from": 0, // the index of the slide react-full-page is scrolling _from_
  "to": 1, // the index of the slide react-full-page is scrolling _to_
}

所以,基本上我想要做的是当单击按钮时,将幻灯片的索引更改为 0。任何人都可以帮助我吗?

xadm

我可以确认window.scrollTo(0,xxx)滑块中无法识别“外部”位置更改你应该在github上创建一个问题。

  1. 为什么不使用传递给<FullPage />( controlsprop) 的自定义控件

  2. 您可以使用ref调用方法<FullPage />,例如:

    <FullPage sliderRef={el => this.sliderRef = el}> <Slide> A </Slide> <Slide> B </Slide> </FullPage> <button onClick={() => this.sliderRef.scrollToSlide(0)}>scrollToTop</button>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React Ref ScrollTop 总是返回 0

在React.js中使用NPM UUID

使用 react-spring 动画 scrollTop

Sonarqube在React JS中的覆盖率为0%

React:只有在第一部分完全完成后才执行后面的函数

如何在React中为正文文本的一部分添加样式

如何在React Native的TextInput中为文本的一部分应用样式?

React Relay将根查询更新为突变胖查询的一部分

使用 npm 将 React 代码渲染为 HTML 文件

单击时如何创建边框字符串的一部分:React.js

为什么滚动时元素的scrollTop属性保持为0?

将react组件导出为npm包

从子级更改父级的一部分 - React.js

React.js在悬停问题上显示组件的一部分

在 React.js 中:是否可以只访问子组件的一部分?

通过react JS中的函数渲染组件的一部分

是否可以使用香草JavaScript而不是react.js来呈现网站的一部分?

单击 npm start 时 react.js 中的错误

在React中值长度为0时输入字段消失

document.scrollTop在Ionic中为0

react.js npm包无法解析

如何在React Native中使用React js NPM软件包

react-full-page会阻止我的页面以特定ID(例如http:// localhost:3000 /#someIdWhereIWantThePageToBeOpened)打开

react-full-page模块未找到整页滚动

将 React 应用程序导出为包含 SVG 图片的 npm 模块时出现问题

如何使用React JS为图像创建虚拟滚动

使用React JS将博客文章显示为“网格”

react.js 状态为空,尽管使用了 useEffect

如何在使用React时将react-particles-js设置为背景?