Scroll Direction In Blazor Component

Question

i'm trying to put some code i've seen in a template in blazor , here is the exemple "Use .hover-scroll, .hover-scroll-y and .hover-scroll-x in a HTML container with a suitable fixed height to display the scrollbar with an overlay on hover"

<div class="hover-scroll h-300px px-5">
    ...
</div>

<div class="hover-scroll-y h-300px px-5">
    ...
</div>

<div class="hover-scroll-x h-300px px-5">
    ...
</div>

here is my final component :

<div class="@GetClass(Class) h-@(HeightInPx)px px-5 w-@(WidthtInPx)px">
    @Text+ @Text+ @Text+ @Text+ @Text
</div>

@code {
    [Parameter]
    public string Text { get; set; } = " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel fringilla est ullamcorper eget nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sed faucibus turpis in eu mi. Velit egestas dui id ornare arcu odio. Arcu non odio euismod lacinia at quis risus sed vulputate. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vehicula ipsum a arcu cursus. Gravida neque convallis a cras semper. Amet massa vitae tortor condimentum. Lectus mauris ultrices eros in cursus turpis massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui. Vestibulum morbi blandit cursus risus at ultrices.";
    [Parameter]
    public int HeightInPx { get; set; } = 300;
    [Parameter]
    public int WidthtInPx { get; set; } = 700;
    [Parameter]
    public Classes Class { get; set; } = Classes.HoverScrollY;

    public enum Classes { HoverScroll, HoverScrollY, HoverScrollX };

    private string GetClass(Classes Class) {
        switch (Class)
        {
            case Classes.HoverScroll:
                return "hover-scroll";
                break;
            case Classes.HoverScrollX:
                return "hover-scroll-x";
                break;
            default:
                return "hover-scroll-y";
                break;
        }
    }
}

the problem is the direction X is not working even is the class is written manually , it's not working it display always like the img here and u can only move it top and down, how to solve that ?

i tried to move the content of the div in the two direction but it only works for top and down direction

Answer 1

When we want to have scroll-x we need to have a parent element which width is less than the width of the child element. But for scroll-y, we only need to set the height of the element itself.

<div class="hover-scroll-x">
    <div class="hover-scroll-y">
        @Text+ @Text+ @Text+ @Text+ @Text
    </div>
</div>

.hover-scroll-y {
    height: 300px;
    width: 800px;
    overflow: hidden;
}

.hover-scroll-y:hover {
    overflow-y: scroll;
}

.hover-scroll-x {
    width: 500px;
    overflow-x: hidden;
}

.hover-scroll-x:hover {
    overflow-x: scroll;
}