滑动时React Bootstrap Carousel滚动顶部

Posted 2023-03-23

【中文标题】滑动时React Bootstrap Carousel滚动顶部

【英文标题】：React Bootstrap Carousel scroll top when slide

【发布时间】：2020-12-15 15:34:00

【问题描述】：

我试图弄清楚当我滑动到下一个或上一个项目时如何让我的 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

提前感谢您的宝贵时间！

【参考方案1】：

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

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

【讨论】：

您好，我尝试使用useEffect(()=>window.scrollTo(0,0);,[activeIndex])，但是当我打开包含轮播的模式时，它会使主窗口向上滚动。但它必须接近这个答案，谢谢！

【参考方案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

【讨论】：

您好！感谢您的回答。它有点工作，唯一的事情是它向上滚动主窗口而不是模式本身的内容。但差不多了

@federico_531 这个概念是一样的。这次您可以使用Element.scroll - 其中 Element 是对模态可滚动 DOM 元素的 React 引用。我已编辑我的答案以包含此信息和示例沙盒。希望这会有所帮助，祝你好运

谢谢！！它现在只向上滚动元素内的内容。但是你知道，内容的样式是一张没有边框的长照片，它只使用一个滚动条，但是现在当包含轮播的模式打开时，我得到了双滚动条，我必须弄乱两个滚动条浏览整个内容。我通过删除 overlow 来修复它：“auto”但 scrollTop() 停止工作！有什么想法吗？

是的，您可能添加了另一个具有溢出属性的 div。我的沙箱只是一个例子。重新使用模态的溢出元素 - 这是您将 ref 分配给

的地方

有什么进展吗？ @federico_531