我有几张图片排成一行。并非所有图像都可见。通过向右滚动，可以看到其他图像。我想通过单击按钮向右滚动。如何编写我的方法 ScrollRight 来实现我的目标？
<div style="display:flex;">
<button @onclick="ScrollLeft">A</button>
<div style="overflow:hidden;">
<div style="display:flex;position:relative;bottom:-30px;overflow-y:auto;">
<img width="300" height="300" src="https://www.dogstrust.org.uk/help-advice/_images/164742v800_puppy-1.jpg" />
<img width="300" height="300" src="https://www.dogstrust.org.uk/help-advice/_images/164742v800_puppy-1.jpg" />
<img width="300" height="300" src="https://www.dogstrust.org.uk/help-advice/_images/164742v800_puppy-1.jpg" />
<img width="300" height="300" src="https://www.dogstrust.org.uk/help-advice/_images/164742v800_puppy-1.jpg" />
<img width="300" height="300" src="https://www.dogstrust.org.uk/help-advice/_images/164742v800_puppy-1.jpg" />
<img width="300" height="300" src="https://www.dogstrust.org.uk/help-advice/_images/164742v800_puppy-1.jpg" />
<img width="300" height="300" src="https://www.dogstrust.org.uk/help-advice/_images/164742v800_puppy-1.jpg" />
<img width="300" height="300" src="https://www.dogstrust.org.uk/help-advice/_images/164742v800_puppy-1.jpg" />
<img width="300" height="300" src="https://www.dogstrust.org.uk/help-advice/_images/164742v800_puppy-1.jpg" />
<img width="300" height="300" src="https://www.dogstrust.org.uk/help-advice/_images/164742v800_puppy-1.jpg" />
<!-->and so on/!-->
</div>
</div>
<button @onclick="ScrollRight">B</button>
</div>
@code {
public void ScrollLeft()
{
}
public void ScrollRight()
{
}
}
最佳答案
我创建了一个 .js 文件:
function ScrollRight(Element, Width) {
document.getElementById(Element).scrollBy({
top: 0, left: Width * Math.floor((document.getElementById(Element).offsetWidth / Width)), behavior: "smooth"
})
}
function ScrollLeft(Element, Width) {
document.getElementById(Element).scrollBy({
top: 0, left: -Width * Math.floor((document.getElementById(Element).offsetWidth / Width)), behavior: "smooth"
})
}
添加了@inject IJSRuntime JsRuntime和
@code {
async Task ScrollRight()
{
await JsRuntime.InvokeVoidAsync(identifier: "ScrollRight", "scrollable-events", 255);
}
async Task ScrollLeft()
{
await JsRuntime.InvokeVoidAsync(identifier: "ScrollLeft", "scrollable-events", 255);
}
}
在我的 .razor 文件中。
关于c# - 使用 Blazor 中的按钮向左/向右滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62821867/