[英]Cannot scroll to element if position absolute and overflow-x hidden specified
[英]set initial scroll position to - overflow-x: scroll - element
我有一個圖像,當在不適合整個寬度的屏幕上看到時,可以向右滾動以查看它的 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;
}
}
這表明:
這就是我想要展示的:
您可以嘗試滾動對齊對齊屬性以將其對齊到中心。
scroll-snap-align 是 CSS 滾動捕捉模塊的一部分。 滾動捕捉是指在滾動 window(或可滾動容器)時將視口的 position“鎖定”到頁面上的特定元素。 想象一個滾動捕捉容器,就像在一個元素頂部放置一塊磁鐵,該元素粘在視口頂部並迫使頁面在此處停止滾動。
.element { scroll-snap-align: center; }
有關此的更多信息: https://css-tricks.com/almanac/properties/s/scroll-snap-align/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.