add scrolling to textarea

[cozzbox]

I would like textarea to allow users to scroll manually. It has a very long string. How can I solve it? 

Please help me.

fitbit ionic

┌────────────┐
│　     title                 │
│　　      　　　　　│   ↑
│xxxxxxxxxxxxxxxxx│  scroll
│xxxxxxxxxxxxxxxxx│    ↓
└────────────┘

I already saw View Components Guide. 

https://dev.fitbit.com/build/guides/user-interface/components/views/

Thank you.

// gui
 <svg>
   <use href="#scrollview">
     <use href="#scrollview-item">
       <text class="title" x="50%" y="10%" text-anchor="middle">Title</text>
       <textarea id="message" class="mytextarea" />
     </use>
   </use>
 </svg>

 or

 <svg>
   <text class="title" x="50%" y="10%" text-anchor="middle">Title</text>
   <textarea id="message" class="mytextarea" />
 </svg>

// css
.mytextarea { 
 font-size: 24; 
 fill: white; 
 font-family: SevilleSharp-Bold; 
 font-weight: regular; 
 text-length: 2048; 
 text-anchor: middle;
 x: 5;
 y: 20%;
 width:100%-10;
 height: 300%;
}

// app
let message = document.getElementById("message");
// set logn string (ex: 2000 charactors)
message.text = "xxxxxxxxxxxxxxxx.......";

[cozzbox]

I tried putting "scrollview-item" multiple times. I divided long messages by 170 characters and set them to "scrollview-item" of each. I can now scroll, but it looks very bad. I want to scroll with only one "scrollview-item".

Thank you.

    <use href="#scrollview">
      <use href="#scrollview-item">
        <text class="titele" x="50%" y="10%">Title</text>
        <textarea id="detail-page-1" class="message" text-length="1024"></textarea>
      </use>
      <use href="#scrollview-item">
        <textarea id="detail-page-2" class="message" text-length="1024"></textarea>
      </use>
      <use href="#scrollview-item">
        <textarea id="detail-page-3" class="message" text-length="1024"></textarea>
      </use>
      <use href="#scrollview-item">
        <textarea id="detail-page-4" class="message" text-length="1024"></textarea>
      </use>
      <use href="#scrollview-item">
        <textarea id="detail-page-5" class="message" text-length="1024"></textarea>
      </use>
    </use>

[cozzbox]

I have not solved this problem yet.

Does ScrollView function correctly in one scrollview-item?

The scrollview-item contains a very long text.

Thank you.