Как разместить элемент рядом с возможной правой полосой прокрутки?

Question

Я хочу, чтобы элементы моей страницы оставались в одном положении независимо от того, есть ли полоса прокрутки на правом краю или нет. Мне удалось выполнить sh это для основного содержимого, указав в теле 100vw и указав основному содержимому margin-right ширины полосы прокрутки. (Предположим, для простоты, что ширина полосы прокрутки зафиксирована на уровне 16 пикселей.) Но я не могу понять, как разместить содержимое на правом джойстике там, где будет левый край полосы прокрутки.

In В приведенном ниже примере текст «Правый» не должен менять свое положение при появлении полосы прокрутки, и весь его текст должен оставаться видимым без жесткого кодирования его left (поскольку его придется менять каждый раз, когда ширина его содержимого изменяется ).

const { style } = main;
setInterval(() => {
  // simulating lots of main content
  style.height = style.height ? '' : '1000px';
}, 2000);

body {
  margin-top: 40px; /* because the "Result" gets in the way */
  width: 100vw;
  margin: 0;
}
#right {
  position: absolute;
  right: 0;
}
#right > div {
  margin-right: 16px; /* SCROLLBAR WIDTH */
}

#main {
  padding-top: 60px;
  margin-right: 16px; /* SCROLLBAR WIDTH */
}
#main > div {
  text-align: center;
  margin: 0;
}

<div id=right>
  <div>
    Right
  </div>
</div>
<div id=main>
  <div>
    Main content (does not change position)
  </div>
</div>

Я пробовал множество комбинаций свойств float: right, position: absolute, margin-right и right для элементов и попробовал вложить еще один контейнер справа, но ничего не дало желаемого результата. Как этого добиться?

Answer 1

Используйте левое, а не правое с единицей vw и исправьте переводом:

const { style } = main;
setInterval(() => {
  // simulating lots of main content
  style.height = style.height ? '' : '1000px';
}, 2000);

body {
  margin-top: 40px; /* because the "Result" gets in the way */
  width: 100vw;
  margin: 0;
}
#right {
  position: absolute;
  left: 100vw; /* all the way to the left */
  transform:translateX(calc(-1*(100% + 16px))); /* move back considering 100% of its width and scrollbar width*/
}
#right > div {
  margin-right: 16px; /* SCROLLBAR WIDTH */
}

#main {
  padding-top: 60px;
  margin-right: 16px; /* SCROLLBAR WIDTH */
}
#main > div {
  text-align: center;
  margin: 0;
}

<div id=right>
  <div>
    Right
  </div>
</div>
<div id=main>
  <div>
    Main content (does not change position)
  </div>
</div>