implementing synchronous scrolling for two or more div containers

[ALAWIII]

I am using dioxus , I want to implement synchronous scrolling for text-area and line-number , so that line-number follows text-area position ,
can I add a hidden property so that we give the flexibility of hiding or viewing the scrollbar of an attached container ?

use dioxus::prelude::*;
use scroll_rs::dioxus::Scroll;
#[component]
pub(super) fn TextEditor() -> Element {
    let mut content = use_signal(|| String::new());
    let mut scroll_pos = use_signal(|| 0);
    rsx!(
        div {
            id: "text-editor",
            class: "card flex flex-col min-h-0  w-full h-full m-[10px]
            border rounded-2xl ",

            div {
                id: "tools",
                class: "h-[10%]
                         border-b border-inherit rounded-t-2xl text-center",
                "tools"
            }
            div {
                id: "edit-area",
                class: "flex w-full h-full min-h-0 min-w-0 border-inherit
                 whitespace-pre-wrap break-words
                rounded-b-2xl overflow-hidden",


                div {
                    id: "line-number",
                    class: "h-full w-fit text-center rounded-bl-2xl
                   p-[3px] overflow-hidden
                   ",

                    for i in 0..1000 {
                        div { "{i}" }
                    }
                
                }

                div {
                    id: "text-area",
                    class: " flex-1 h-full
                     max-w-full overflow-auto
                    whitespace-pre-wrap
                    pl-[10px] shadow-lg
                    border-l focus:outline-none border-inherit
                 ",
                    contenteditable: "true",
                    oninput: move |evt| content.set(evt.value()),
                
                }
            

            }
        }
    )
}