#results容器内容填满后无法自动滚动，新内容无法自动显示

1. 为#results添加滚动样式 #

首先需要给结果容器设置固定高度和滚动属性，否则内容溢出时不会出现滚动条。在<style>标签中添加：

#results {
  height: 70vh; /* 可根据页面布局调整，比如占视口70%高度 */
  overflow-y: auto;
  border: 1px solid #ccc; /* 可选，方便区分容器边界 */
  padding: 8px;
}

2. 实现自动滚动到底部 #

每次调用spin函数添加新结果后，强制容器滚动到最底部。修改spin函数的末尾：

function spin(number) {
  // ... 原有代码保持不变 ...
  
  resultsDiv.innerHTML += resultHTML;
  
  // 添加以下代码实现自动滚动
  resultsDiv.scrollTop = resultsDiv.scrollHeight;
}

修改后的完整代码 #

<!DOCTYPE html>
<html>
<body>

<div id="results">
</div>

<div id="modal">
<div id="modal-content">
  <p>Select a number between 0 and 36:</p>
  <div id="numberButtons"></div>
  <button id="close-button" onclick="closeModal()">Close</button>
</div>
</div>
</div>
<style>

/* 添加#results的滚动样式 */
#results {
  height: 70vh;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 8px;
}

/* The modal background */
#modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

/* The modal content */
#modal-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fefefe;
padding: 20px;
width: 18%;
border: 3px solid black;

}

/* The close button */
#close-button {
  display: block;
  margin: 0 auto;
}

#numberButtons button {
  color: white;
  width: 50px;
  height: 50px;
  font-size:30px;
font-weight:600;
}

#modal.inactive{
opacity: 0.2;
}

</style>
<script>

var bankRoll = parseFloat(prompt("Please enter your starting bankroll:"));
if(isNaN(bankRoll)){
bankRoll = parseFloat(prompt("Invalid input. Please enter a valid number for your starting bankroll:"));
}

bankRoll = bankRoll.toFixed(2);

var spinNumber=0;

var backline="";

var isDragging = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;

const modalContent = document.querySelector("#modal-content");

modalContent.addEventListener("mousedown", dragStart);
modalContent.addEventListener("mouseup", dragEnd);
modalContent.addEventListener("mousemove", drag);

function dragStart(e) {
  initialX = e.clientX - xOffset;
  initialY = e.clientY - yOffset;

  if (e.target === modalContent) {
    isDragging = true;
  }
}

let inactivityTimeout;

function dragEnd(e) {
initialX = currentX;
initialY = currentY;

isDragging = false;
clearTimeout(inactivityTimeout);
inactivityTimeout = setTimeout(() => {
modal.classList.add("inactive")
}, 15000)
}

function drag(e) {
if (e.buttons === 1) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;

xOffset = currentX;
yOffset = currentY;

setTranslate(currentX, currentY, modalContent);
clearTimeout(inactivityTimeout);
modal.classList.remove("inactive")
}
}

function setTranslate(xPos, yPos, el) {
  el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

function getNumberType(number) {

  if (number === 0) {
    return "green";
  } else if (number % 2 === 0) {
    return "even";
  } else {
    return "odd";
  }
}

function roulette(number) {
  // Determine the color of the number
  var color;
  if (number === 0) {
    color = "Green";
  } else if (number === 1 || number === 3 || number === 5 || number === 7 || number === 9 || number === 12 || number === 14 || number === 16 || number === 18 || number === 19 || number === 21 || number === 23 || number === 25 || number === 27 || number === 30 || number === 32 || number === 34 || number === 36) {
    color = "Red";
  } else {
    color = "Black";
  }

  // Map the color names to CSS color values
  if (color === "Green") {
    return "rgb(0, 128, 0)";
  } else if (color === "Red") {
    return "rgb(255, 0, 0)";
  } else {
    return "rgb(0, 0, 0)";
  }
}

function backgroundline() {
   if (spinNumber % 2 === 0) {
    backline="#D3D3D3"
  } else {
   backline="#E5E4E2";
  }
}

function spin(number) {
// Determine the color of the number
var color = roulette(number);
spinNumber= spinNumber+1;

bankRoll=bankRoll-10;
backgroundline();
// Display the result
var resultsDiv = document.getElementById("results");
var resultHTML = `${number}`;

resultHTML = `<div style="padding:10px 0; background: ${backline};vertical-align:middle;margin-bottom:-20px;">

<div style="padding:5px; display: inline-block; background: yellow; color:black;vertical-align:middle; width:30px; text-align:right;">${spinNumber}</div>

<div style="margin: 0 10px; display:inline-block; width: 70px; text-align:center;vertical-align:middle">£ ${bankRoll}</div>

<div style="color: white; padding: 5px; display: inline-block; width:30px; padding-top:15px;vertical-align:middle; font-size: 25px; font-weight:600; height:30px; text-align:center; background-color: ${color}; ">${resultHTML}</div>

</div>

<br style="height:0px;"/>`;

resultsDiv.innerHTML += resultHTML;

// 添加自动滚动代码
resultsDiv.scrollTop = resultsDiv.scrollHeight;

}
// Set up the buttons
for (let i = 0; i <= 36; i++) {
let button = document.createElement("button");
button.innerHTML = i;
button.style.backgroundColor = roulette(i);
button.addEventListener("click", function() {
  spin(i);
});
document.getElementById("numberButtons").appendChild(button);
}

function closeModal() {
// Get the modal element
var modal = document.getElementById("modal");

// Remove the modal element from the DOM
modal.remove();
}
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Gazoi