我正試著把我在blazor的一個(gè)模板中看到的一些代碼放進(jìn)去，這是一個(gè)例子 "使用。懸停-滾動(dòng)，。懸停滾動(dòng)y和。一個(gè)HTML容器中的hover-scroll-x，具有合適的固定高度，在hover & quot

<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>

這是我的最后一部分:

<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;
        }
    }
}

問題是X方向不工作，即使類是手動(dòng)編寫的，它也不工作，它的顯示總是像img here

我試圖在兩個(gè)方向上移動(dòng)div的內(nèi)容，但它只適用于上下方向

當(dāng)我們想要scroll-x時(shí)，我們需要一個(gè)寬度小于子元素寬度的父元素。但是對(duì)于scroll-y，我們只需要設(shè)置元素本身的高度。

<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;
}