javascript - HTML 溢出不滚动

标签 javascript html css scroll overflow

我正在制作一个 HTML 计算器，我正在使用表格来对齐所有内容。然而，当输入太多字符时，计算器会变大而不是滚动，即使有 overflow-x: scroll 属性。到目前为止，这是我的代码:

var problem = ""
var answer = document.getElementById("responseSpan")

var chars = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."]

function hit(key) {
  //console.log(key)
  if (chars.includes(key)) {
    problem = problem + key
  }

  answer.innerText = problem
}
body {
  background-color: #e0e0e0;
}

table {
  width: 25%;
  border-spacing: 0px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

td {
  border: 1px solid gray;
  padding: 1px;
  text-align: right;
}

.clickable {
  cursor: pointer;
  text-align: center;
  color: black;
  padding-top: 5%;
  padding-bottom: 5%;
  font-size: 1.5em;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.clickable:hover {
  filter: brightness(85%);
}

#response {
  color: white;
  background-color: gray;
  font-size: 70px;
  padding-top: 2%;
  padding-bottom: 2%;
}

#responseSpan {
  overflow-x: scroll;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
</head>

<body>
  <table>
    <tr>
      <td colspan="4" id="response"><span id="responseSpan">0</span></td>
    </tr>
    <tr>
      <td class="clickable" style="background-color:darkgray;" onclick="hit('AC')">AC</td>
      <td class="clickable" style="background-color:darkgray;" onclick="hit('+/-')">+/-</td>
      <td class="clickable" style="background-color:darkgray;" onclick="hit('%')">%</td>
      <td class="clickable" style="background-color:orange;" onclick="hit('/')">➗</td>
    </tr>
    <tr>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('7')">7</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('8')">8</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('9')">9</td>
      <td class="clickable" style="background-color:orange;" onclick="hit('x')">x</td>
    </tr>
    <tr>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('4')">4</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('5')">5</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('6')">6</td>
      <td class="clickable" style="background-color:orange;" onclick="hit('-')">-</td>
    </tr>
    <tr>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('1')">1</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('2')">2</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('3')">3</td>
      <td class="clickable" style="background-color:orange;" onclick="hit('+')">+</td>
    </tr>
    <tr>
      <td colspan="2" class="clickable" style="background-color:lightgray;" onclick="hit('0')">0</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('.')">.</td>
      <td class="clickable" style="background-color:orange;" onclick="hit('=')">=</td>
    </tr>
  </table>
</body>

</html>

当我按下的字符多于响应范围可以处理的字符时，它会变大而不是滚动。

最佳答案

要使 overflow-x: scroll 正常工作，您的 span 元素应该显示 inline-block(或 block)，如以及定义的宽度，例如:

#responseSpan {
  overflow-x: scroll;
  display: inline-block;
  width: 25vw;
}

演示:

var problem = ""
var answer = document.getElementById("responseSpan")

var chars = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."]

function hit(key) {
  //console.log(key)
  if (chars.includes(key)) {
    problem = problem + key
  }

  answer.innerText = problem
}
body {
  background-color: #e0e0e0;
}

table {
  width: 25%;
  border-spacing: 0px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

td {
  border: 1px solid gray;
  padding: 1px;
  text-align: right;
}

.clickable {
  cursor: pointer;
  text-align: center;
  color: black;
  padding-top: 5%;
  padding-bottom: 5%;
  font-size: 1.5em;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.clickable:hover {
  filter: brightness(85%);
}

#response {
  color: white;
  background-color: gray;
  font-size: 70px;
  padding-top: 2%;
  padding-bottom: 2%;
}

/* Changes are here */
#responseSpan {
  overflow-x: scroll;
  display: inline-block;
  width: 25vw;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
</head>

<body>
  <table>
    <tr>
      <td colspan="4" id="response"><span id="responseSpan">0</span></td>
    </tr>
    <tr>
      <td class="clickable" style="background-color:darkgray;" onclick="hit('AC')">AC</td>
      <td class="clickable" style="background-color:darkgray;" onclick="hit('+/-')">+/-</td>
      <td class="clickable" style="background-color:darkgray;" onclick="hit('%')">%</td>
      <td class="clickable" style="background-color:orange;" onclick="hit('/')">➗</td>
    </tr>
    <tr>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('7')">7</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('8')">8</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('9')">9</td>
      <td class="clickable" style="background-color:orange;" onclick="hit('x')">x</td>
    </tr>
    <tr>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('4')">4</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('5')">5</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('6')">6</td>
      <td class="clickable" style="background-color:orange;" onclick="hit('-')">-</td>
    </tr>
    <tr>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('1')">1</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('2')">2</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('3')">3</td>
      <td class="clickable" style="background-color:orange;" onclick="hit('+')">+</td>
    </tr>
    <tr>
      <td colspan="2" class="clickable" style="background-color:lightgray;" onclick="hit('0')">0</td>
      <td class="clickable" style="background-color:lightgray;" onclick="hit('.')">.</td>
      <td class="clickable" style="background-color:orange;" onclick="hit('=')">=</td>
    </tr>
  </table>
</body>

</html>

关于javascript - HTML 溢出不滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63530688/

上一篇：javascript - 如何在 firebase 数据库中添加 indexOn userId

下一篇：javascript - 使用 Formik 编辑条目，Yup 无法识别现有字段

相关文章：

javascript - 数组数组的 JS 子集

javascript - 使用 Jquery 正确地为多个元素设置动画

javascript - 在 AngularJS onload 的下拉菜单中设置选定的选项

html - CSS :hover on child selector

javascript - 根据文本字段中的字符数量调整 DIV 的大小

javascript - 为什么格式化程序在片段 xml 中不起作用？

javascript - 更改 javascript 而不是将鼠标悬停在设定的时间

java - 如何使用 Selenium Web Driver/Java 验证表格中的颜色编码背景

javascript - 使用带有 Unicode 符号的 string.replace() Javascript 时出现问题

html - 如何使具有两个固定列的表响应？

©2024 IT工具网  联系我们