Horizontal scroll overflow ellipsis in navigation tabs at start and end

Problem

I have navigation tabs which are horizontaly scrollable and my task now is to add function that if you scroll this “menu” left or right and the title in nav tab overflows it should add “…” dots to that title. Basically when you scroll to right and you stop scrolling in the middle of the word it should replace this remaining part with dots (same thing when you scroll left )

At first this menu was implemented without these dots and arrows but customers were arguing that they did not know that there were another tabs they could click (on mobile phones)

Figma preview

preview of figma implementation with visible right and left arrow with text overflow dots
preview of what should I implement if Figma

So far all my attempts failed and I’m trying to understand it from scratch but from what I see I do not know if it’s even possible ?

My jsfiddle link

<div class="with-elipsis">Test paragraph with <code>ellipsis</code>. It needs quite a lot of text in order to properly test <code>text-overflow</code>.</div>

<div class="with-elipsis-scroll">Test paragraph with <code>string</code>. It needs quite a lot of text in order to properly test <code>text-overflow</code>.</div>

.with-elipsis {
  width: 500px;
  text-overflow: ellipsis;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: auto;
}

.with-elipsis-scroll {
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: auto;
  height: 40px;
  display: flex;
  overflow-x: scroll;
  width: 200px;
  text-overflow: ellipsis;
}

In this code sample:

  1. context is rendered right but when I scroll the content it scrolls with “dots”
  2. does not work