窗口中的内容溢出阻止滚动并隐藏新内容

我目前正在构建一个轮盘系统程序（这更多的是为了阻止我下注而不是下注！）并且我只是在做基本框架，但已经遇到了主窗口“#results”不滚动的问题充满了结果。滚动需要跟随最新的内容行，因此从模式框中输入返回的最新内容始终显示在底部。我花了几个小时研究许多可能的解决方案，但都无济于事。

这是代码：（对于完整脚本的长度，我深表歉意）

<!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>
  
  
    /* 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;
    
   }
   // 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 Overflow 和互联网上的其他领域尝试了很多解决方案，我认为这些解决方案可能有效，但它似乎不想这样做。

P粉106715703228 天前410

窗口中的内容溢出阻止滚动并隐藏新内容

全部回复(1)我来回复