Прокрутка влево / вправо с помощью кнопок в Blazor

Question

У меня несколько изображений в один ряд. Не все изображения можно увидеть. Прокрутив вправо, можно будет увидеть другие изображения. Я хочу прокрутить вправо, нажав кнопку. Как мне написать свой метод ScrollRight для достижения моей цели?

Answer 1

Я создал файл. 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.