Saya membuat kalkulator menggunakan CSS/HTML/JavaScript. Saat pengguna memasukkan angka atau ekspresi yang terlalu besar untuk tampilan, saya ingin tampilan digulir ke samping, sehingga input terbaru selalu ditampilkan. Saat ini, semua yang terjadi adalah bilah gulir muncul tetapi tetap di posisi paling kiri.

Saya telah menyertakan contoh lengkap di JSFiddle ini. Saya juga telah menyertakan cuplikan CSS dan HTML yang relevan di bawah ini.

.calculator__display {
  background-color: #222222;
  color: #fff;
  font-size: 1.714285714em;
  padding: 0.5em 0.75em;
  text-align: right;
  overflow-x: auto;
}
<div class="calculator__display">0</div>

Saya ingin perilaku yang mirip dengan bilah pencarian google. Saat konten meluap, bilah pencarian menyesuaikan secara otomatis. Saya terbuka untuk solusi menggunakan HTML, CSS, dan/atau javascript vanilla.

Terima kasih untuk bantuannya!

0
Skanda Suresh 9 Juli 2020, 06:15

2 jawaban

Jawaban Terbaik
keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target;
    const displayNum = display.textContent;
    display.textContent = displayNum + key.textContent;
    display.scrollLeft = display.scrollWidth; //add this to scroll to the end
  }
});
1
crimson589 9 Juli 2020, 03:26

Tambahkan lebar 100% di kalkulator_display

-1
Aliasger Ujjainwala 9 Juli 2020, 03:19