Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
13 days ago

What is the method to anchor my absolute button to the end of a div/container, such that it stays in the same position when I scroll that div/container right?

A carousel component with a CloseButton needs to be anchored to a fixed position so that the button remains displayed when scrolling the container to the right. The component containing the button is BottomCarouselContainer, and the attempted solution involved creating a FixedContainer component with a relative position to anchor the absolute button. However, this method didn't work, and the reason is unknown. Here's an example of the code: 


  
    X
  
  
  {image}
To resolve this issue, consider examining why the FixedContainer is not fixing the button's position and possibly replacing it with other CSS techniques, such as position:sticky or position:fixed. Alternatively, use JavaScript to calculate the position of the button as the user scrolls and assign position:absolute to it dynamically.
Answers(2)
avatar
Vogi
12 days ago
Verified Answer
It seems that you are trying to anchor a carousel component with a CloseButton to a fixed position so that the button remains displayed when scrolling the container to the right. You have attempted to create a FixedContainer component with a relative position to anchor the absolute button, but it didn't work. One possible solution is to examine why the FixedContainer is not fixing the button's position and possibly replace it with other CSS techniques, such as position:sticky or position:fixed. Alternatively, you can use JavaScript to calculate the position of the button as the user scrolls and assign position:absolute to it dynamically. Does this help?
avatar
Tolerim
13 days ago
To anchor the CloseButton to a fixed position, you need to give the BottomCarouselContainer a fixed height and set its overflow-y property to scroll. This will make the BottomCarouselContainer scrollable, while keeping the CloseButton anchored to a fixed position. Here's an example of how you can modify your code to achieve this: 
const BottomCarouselContainer=styled.div`
    display:flex;
    position:relative;
    border:1px solid white;
    height:30%;
    width:90%;
    margin:20px auto;
    overflow-y: scroll; // add this line
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
        height:8px;
    }

    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey; 
        border-radius: 10px;
      }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #555; 
      }

    &::-webkit-scrollbar-thumb:hover {
        background: #333;
      } 
`

const FixedContainer=styled.div`
    position:fixed; // change to fixed
    bottom:0; // add this line
    width:100%;
    padding:5px 15px 5px 15px;
`

const GalleryContainer = (props) => {
    const arrayOfImages=[...props.arrayImages];
    const [selectedImage, setSelectedImage]=React.useState(arrayOfImages[0])

    const image=arrayOfImages.map(imageName =>(
        <Photo 
            key={arrayOfImages.indexOf(imageName)}
            img={require(`../../media/images/${props.folder}/${imageName}.JPG`)}
            onClick={()=>setSelectedImage(imageName)}
        />
    ))

    function goToNextImage(){
        if(arrayOfImages.indexOf(selectedImage)+1 <arrayOfImages.length)
            setSelectedImage(arrayOfImages[arrayOfImages.indexOf(selectedImage)+1]);
    }
    function goToPreviousImage(){
        if(arrayOfImages.indexOf(selectedImage)>0)
            setSelectedImage(arrayOfImages[arrayOfImages.indexOf(selectedImage)-1]);
    }
    return (
        <>  
            <PhotoGalleryContainer display={props.display}>
                <PhotoContainer  img={require(`../../media/images/${props.folder}/${selectedImage}.JPG`)}>
                    <ArrowButton onClick={()=>goToPreviousImage()}>&#60;</ArrowButton>
                    <RightArrow onClick={()=>goToNextImage()}>&#62;</RightArrow>
                    <Background arrayOfImages={arrayOfImages}/>
                    <BottomCarouselContainer> 
                        <FixedContainer> // wrap the CloseButton with FixedContainer
                            <CloseButton>X</CloseButton>
                        </FixedContainer>
                        {image}
                    </BottomCarouselContainer> 
                </PhotoContainer>
            </PhotoGalleryContainer>
        </>
    )
}

export default GalleryContainer
In this example, we changed the position of FixedContainer to 'fixed' and added the 'bottom' property to set it to the bottom of the BottomCarouselContainer. We also added the 'overflow-y' property to BottomCarouselContainer to make it scrollable, while keeping the CloseButton fixed at the bottom.
;