Je suis actuellement en train de construire un programme de système de roulette (c'est plus pour m'empêcher de placer des paris que de placer des paris !) et je suis juste en train de faire le cadre de base, mais j'ai déjà un problème avec la fenêtre principale "#results" qui ne défile pas complètement. de résultat. Le défilement doit suivre la dernière ligne de contenu, de sorte que le dernier contenu renvoyé par l'entrée dans la boîte modale soit toujours affiché en bas. J'ai passé des heures à rechercher de nombreuses solutions possibles, en vain. Voici le code : (Je m'excuse pour la longueur du script complet) <!DOCTYPEhtml><html><b

Le débordement de contenu dans la fenêtre empêche le défilement et masque le nouveau contenu-Questions et réponses sur le réseau chinois PHP

Je suis actuellement en train de construire un programme de système de roulette (c'est plus pour m'empêcher de placer des paris que de placer des paris !) et je suis juste en train de faire le cadre de base, mais j'ai déjà un problème avec la fenêtre principale "#results" qui ne défile pas complet a obtenu le résultat. Le défilement doit suivre la dernière ligne de contenu, de sorte que le dernier contenu renvoyé par l'entrée dans la boîte modale soit toujours affiché en bas. J'ai passé des heures à rechercher de nombreuses solutions possibles, en vain.

Voici le code : (je m'excuse pour la longueur du script complet)

<!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>

J'ai essayé de nombreuses solutions sur Stack Overflow et d'autres domaines d'Internet qui, je pensais, pourraient fonctionner, mais cela ne semble pas vouloir.