“Scroll Direction In Blazor Component” 可以翻译为 “在 Blazor 组件中的滚动方向”。

huangapple go评论64阅读模式
英文:

Scroll Direction In Blazor Component

问题

I'm trying to put some code I've seen in a template in Blazor. Here is the example:

<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 that the direction X is not working, even if the class is written manually. It always displays like the image here: “Scroll Direction In Blazor Component” 可以翻译为 “在 Blazor 组件中的滚动方向”。, and you can only move it top and down. How to solve that?

I tried to move the content of the div in two directions, but it only works for the top and down direction.

英文:

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"

&lt;div class=&quot;hover-scroll h-300px px-5&quot;&gt;
    ...
&lt;/div&gt;

&lt;div class=&quot;hover-scroll-y h-300px px-5&quot;&gt;
    ...
&lt;/div&gt;

&lt;div class=&quot;hover-scroll-x h-300px px-5&quot;&gt;
    ...
&lt;/div&gt;

here is my final component :

&lt;div class=&quot;@GetClass(Class) h-@(HeightInPx)px px-5 w-@(WidthtInPx)px&quot;&gt;
    @Text+ @Text+ @Text+ @Text+ @Text
&lt;/div&gt;

@code {
    [Parameter]
    public string Text { get; set; } = &quot; 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.&quot;;
    [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 &quot;hover-scroll&quot;;
                break;
            case Classes.HoverScrollX:
                return &quot;hover-scroll-x&quot;;
                break;
            default:
                return &quot;hover-scroll-y&quot;;
                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 “Scroll Direction In Blazor Component” 可以翻译为 “在 Blazor 组件中的滚动方向”。 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

答案1

得分: 0

以下是翻译好的内容:

当我们想要实现水平滚动 (scroll-x) 时,我们需要一个父元素,其宽度小于子元素的宽度。但对于垂直滚动 (scroll-y),我们只需要设置元素本身的高度。

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

“Scroll Direction In Blazor Component” 可以翻译为 “在 Blazor 组件中的滚动方向”。

英文:

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.

&lt;div class=&quot;hover-scroll-x&quot;&gt;
    &lt;div class=&quot;hover-scroll-y&quot;&gt;
        @Text+ @Text+ @Text+ @Text+ @Text
    &lt;/div&gt;
&lt;/div&gt;

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

“Scroll Direction In Blazor Component” 可以翻译为 “在 Blazor 组件中的滚动方向”。

huangapple
  • 本文由 发表于 2023年5月25日 20:26:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76332261.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定