Saya ingin elemen halaman saya tetap di posisi yang sama terlepas dari apakah ada bilah gulir di tepi kanan atau tidak. Saya telah berhasil mencapai ini untuk konten utama dengan memberikan badan 100vw dan dengan memberikan konten utama margin-right lebar bilah gulir. (Asumsikan, demi kesederhanaan, bahwa lebar bilah gulir ditetapkan pada 16px.) Tapi saya tidak tahu bagaimana membuat konten di tongkat kanan ke tempat tepi kiri bilah gulir akan berada.

Pada contoh di bawah, teks "Kanan" tidak boleh berubah posisi saat bilah gulir muncul, dan semua teksnya harus tetap terlihat tanpa hard-coding left (karena itu harus diubah setiap kali lebar isinya berubah).

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>

Saya telah mencoba banyak kombinasi properti float: right, position: absolute, margin-right dan right pada elemen, dan mencoba membuat wadah lain di sebelah kanan, tetapi tidak ada yang memberi saya hasil yang diinginkan. Bagaimana ini bisa dicapai?

css
3
Snow 16 Juni 2020, 18:08

1 menjawab

Jawaban Terbaik

Gunakan kiri bukan kanan dengan unit vw dan perbaiki dengan terjemahan:

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>
3
Temani Afif 16 Juni 2020, 15:11