滑动时React Bootstrap Carousel滚动顶部

Question

我试图弄清楚当我滑动到下一个或上一个项目时如何让我的 Reactstrap 轮播向上滚动。

这正是我需要它工作的方式Bootstrap Carousel scroll top when slide 但是我使用 reactstrap 节点模块以另一种方式做事，我不太了解如何使 window.scrollTo(0,0) 之类的东西与下一个和上一个滑动按钮相关。

代码如下：

import React, { useState, Component } from 'react';
import fotos2 from '../data/fotos2'

import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from 'reactstrap';

const Example = (props) => {
  const [activeIndex, setActiveIndex] = useState(props.id);
  const [animating, setAnimating] = useState(false);

  const scrollTop = () => {
    window.scrollTo(0,0);
  };

  const next = () => {
    if (animating) return;
    const nextIndex = activeIndex === fotos2.length - 1 ? 0 : activeIndex + 1 || 
    setActiveIndex(nextIndex);
    scrollTop();
  }

  const previous = () => {
    if (animating) return;
    const nextIndex = activeIndex === 0 ? fotos2.length - 1 : activeIndex - 1;
    setActiveIndex(nextIndex);
    scrollTop();
  }

  const goToIndex = (newIndex) => {
    if (animating) return;
    setActiveIndex(newIndex);
  }

  const slides = fotos2.map((item) => {


    return (
      <CarouselItem data-pause="hover" style={{ minHeight: '20em' }}
        className="custom-tag"
        tag="div"
        key={item.url}
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
      >
        {/* <img src={props.foto} alt={item.altText}/> */}
        <img className="imagenCarousel" src={item.url} alt={item.altText} />

        <CarouselCaption className="text-danger" captionText={item.caption} captionHeader={item.caption} />

      </CarouselItem>


    );
  });

  return (
    <div>

      {/* interval={false} para el slider */}
      <Carousel
        activeIndex={activeIndex}
        next={next}
        previous={previous}
        interval={false}
      >

        <CarouselIndicators items={fotos2} activeIndex={activeIndex} onClickHandler={goToIndex} />
        {slides}
        <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
        <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
      </Carousel>
    </div>
  );
}

export default Example;

我已经尝试了几个解决方案，但它使主窗口向上滚动，而不是仅滚动包含轮播的 Modal

提前感谢您的宝贵时间！

Answer 1

每次更改 activeIndex 时都需要调用 useEffect 以将元素滚动到顶部。试试这个，让我知道它是否有效..

useEffect(()=>{window.scrollTop(0);},[activeIndex])

Answer 2

如果您阅读docs，您将看到scrollTo 接受2 个参数(x,y) 或1 个对象类型的参数。您对window.scrollTo(0); 的使用会导致错误，因为它既没有传递对象也没有传递2 个参数。

您可以通过为 y 轴添加第二个参数来解决此问题：

const scrollTop = () => {
  window.scrollTo(0, 0);
};

此外，当调用next 或previous 时，您当前的滚动到右上角的实现会将窗口立即滚动到右上角。如果您想保留您已链接的 Stack Overflow 问题的行为（即，动画完成后滚动到顶部），您可以选择触发 onExited 的 onExited 属性回调上的 scrollTop 函数@ 987654334@组件

<CarouselItem
    onExited={() => {
        setAnimating(false);
        scrollTop();
    }}
></CarouselItem>

代码沙盒：https://codesandbox.io/s/heuristic-bird-n2vno?file=/src/App.js

---

Modal 溢出问题的概念和逻辑是相同的。这次你可以使用Element.scroll - 其中 Element 是对模态可滚动 DOM 元素的 React 引用。

const containerRef = useRef(null);

const scrollTop = () => {
  // window.scrollTo(0, 0);
  containerRef.current.scroll(0, 0);
};

<div ref={containerRef}>

代码沙盒：https://codesandbox.io/s/relaxed-mclaren-sklgp?file=/src/App.js

useRef 钩子：https://reactjs.org/docs/hooks-reference.html#useref