将初始滚动 position 设置为-溢出-x：滚动-元素

Question

我有一个图像，当在不适合整个宽度的屏幕上看到时，可以向右滚动以查看它的 rest。

但是，我希望首先显示图像的中心，而不是左侧。

这是我的反应代码->

 import React, { useEffect, useRef, useState } from "react";
 import "./image_bottom.css";
 import Goblins from "../../images/image_bot_goblins.png";
 import Background from "../../images/image_bot_fondo.png";
 import Shine from "../../images/image_bot_shine.png";

 function ImageBottom() {
   const [offsetY, setOffsetY] = useState(0);
   const [parentHeight, setParentHeight] = useState(0);
   const imageRef = useRef<HTMLImageElement>(null);

   const handleScroll = () => {
     setOffsetY(window.scrollY);
     if (imageRef.current != null) {
       setParentHeight(imageRef.current.height);
     }
   };

   useEffect(() => {
     window.addEventListener("scroll", handleScroll);
     window.addEventListener("resize", handleScroll);
     return () => {
       window.removeEventListener("scroll", handleScroll);
       window.removeEventListener("resize", handleScroll);
     };
   }, []);

   const handleImageLoad = () => {
     if (imageRef.current != null) {
       setParentHeight(imageRef.current.height);
     }
   };

   return (
     <div
      id="image-bot_flex"
      className="relative flex items-center"
      style={{ left: offsetY }}
     >
    <div
      className="image-bot_section"
      style={{
      height: parentHeight,
      }}
    >
    <img
      src={Shine}
      id="shine"
      style={{ transform: `translateX(${offsetY * -0.10}px)` }}
    />
    <img
      src={Background}
      ref={imageRef}
      onLoad={handleImageLoad}
      alt=""
      id="background"
    />
    <img
      src={Goblins}
      alt=""
      id="goblins"
      style={{ transform: `translateX(${0.05 * -offsetY }px)` }}
    />
  </div>
</div>
);
}

export default ImageBottom;

这是我的 css：

 .image-bot_section {
    position: relative;
    /* height: 100vh; */
    top: 0;
    left: 0;
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    scroll-behavior: smooth;
    animation:opacity-in 0.1s;
    background-color: black;
    /* overflow: cover; */
 }

 .image-bot_section::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width : 0)  {
    .image-bot_section img {
    height: 80vh;
    }
  
  .image-bot_section {
    height: 80vh;
  }
 }

 @media screen and (min-width : 1000px)  {

    .image-bot_section {
        height: 100vh;
    }

    .image-bot_section img {
        height: 100vh;
    }
 }


 .image-bot_section img {
    position: absolute;
    object-position: top left;
    top: 0;
    left: 0;
    min-width: 100vw;
 }

 #image-bot_flex::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 15vh;
  background: linear-gradient(to bottom, #000000, transparent);
  z-index: 5;
 }

.image-bot_section img#shine {
  z-index: 7;
  animation: opacity-in 6s infinite;
}

.image-bot_section img#background {
  animation: opacity-breathe 4s infinite;
 }

 @keyframes opacity-in {
  0% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.1;
  }
 }

 @keyframes opacity-breathe {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 0.4;
  }
 }

这表明：

向左滚动

这就是我想要展示的：

滚动中心

Answer 1

您可以尝试滚动对齐对齐属性以将其对齐到中心。

scroll-snap-align 是 CSS 滚动捕捉模块的一部分。 滚动捕捉是指在滚动 window（或可滚动容器）时将视口的 position“锁定”到页面上的特定元素。 想象一个滚动捕捉容器，就像在一个元素顶部放置一块磁铁，该元素粘在视口顶部并迫使页面在此处停止滚动。

.element { scroll-snap-align: center; }

有关此的更多信息： https://css-tricks.com/almanac/properties/s/scroll-snap-align/