英文:
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: , 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"
<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
答案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;
}
英文:
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;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论