Scroll left/right with Buttons in Blazor

Question

I have a few images in one row. Not all images can be seen. By scrolling to the right it would be possible to see the other images. I want to scroll to the right by clicking a button. How do I write my method ScrollRight to achieve my goal?


    
    
        
            
            
            
            
            
            
            
            
            
            
            and so on/!-->
        
    
    



@code {

    public void ScrollLeft()
    {

    }

    public void ScrollRight()
    {

    }

}

user_10093744 · Answer

I created a .js file:

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"
    })
}

added @inject IJSRuntime JsRuntime and

@code {


    async Task ScrollRight()
    {
        await JsRuntime.InvokeVoidAsync(identifier: "ScrollRight", "scrollable-events", 255);
    }

    async Task ScrollLeft()
    {
        await JsRuntime.InvokeVoidAsync(identifier: "ScrollLeft", "scrollable-events", 255);
    }

}

in my .razor file.

Scroll left/right with Buttons in Blazor

1 Answers