Как добавить ползунок для вертикального скрола на html

Question

Как добавить ползунок для вертикального скрола на html. Мне нужно чтобы скрол у #result появлялся при заполнении экрана и чтобы .input-container и #result не накладывались друг на друга вот код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <style>
    html {
      font-family: Accuratist;
      background-color: hsl(0deg 0% 14.32%);
    }

    .input-container {
      display: flex;
      margin: 10px;
    }

    input[type="text"] {
      font-family: Accuratist;
      background-color: hsl(0deg 0% 14.32%);
      box-sizing: border-box;
      border: 2px solid hsl(0deg 0% 76.53%);
      padding: 10px;
      border-radius: 5px;
      width: 95%;
      max-height: 80px;
      overflow-y: auto;
      margin-left: -2px;
    }

    .button {
      font-family: Accuratist;
      background-color: #4CAF50;
      border: none;
      border-radius: 5px;
      color: white;
      padding: 10px 10px;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      cursor: pointer;
      margin-left: 10px;
      display: flex;
      align-items: center;
    }

    .container {
      font-family: Accuratist;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      border-top: 2px solid #121212;
      background-color: #121212;
    }

    title {
      font-family: Accuratist;
    }

    #result {
      overflow-y: scroll;
      font-family: Accuratist;
      color: white;
    }
  </style>
  <title>DerNeX</title>
</head>
<body>
  <div id="result"></div>
  <div class="container">
    <div class="input-container">
      <input type="text" id="myInput" placeholder="Сообщение…" oninput="handleInput(event)">
      <button class="button" onclick="sendRequest()">
        <img src="send.png" alt="Изображение">
      </button>
    </div>
  </div>

  <script type="text/javascript" src="/eel.js"></script>
  <script type="text/javascript">
    // Array to store previous responses
    const previousResponses = [];

    function handleInput(event) {
      if (event.inputType === 'insertParagraph') {
        document.getElementById('myInput').value += '\n';
      }
    }

    async function sendRequest() {
      const userInput = document.getElementById('myInput').value;
      const responseText = await eel.process_input(userInput)();

      // Add the current response to the array
      previousResponses.push(responseText);

      // Display previous responses in the result element
      const resultElement = document.getElementById('result');
      resultElement.innerHTML = previousResponses.map((response, index) => `<p>${response}</p>`).join('');
    }
  </script>
</body>
</html>

у меня получилось вот такое

заранее спасибо.

Answer 1

    html {
      font-family: Accuratist;
      background-color: hsl(0deg 0% 14.32%);
    }
    
    
body{
  overflow: hidden;
}

.mes-con{
  display: grid;
  height: 100vh;
  grid-template-rows: 1fr 80px;
    }
    
    .input-container {
      display: flex;
      margin: 10px;
    }
    

    input[type="text"] {
      font-family: Accuratist;
      background-color: hsl(0deg 0% 14.32%);
      box-sizing: border-box;
      border: 2px solid hsl(0deg 0% 76.53%);
      padding: 10px;
      border-radius: 5px;
      width: 95%;
      max-height: 80px;
      overflow-y: auto;
      margin-left: -2px;
    }

    .button {
      font-family: Accuratist;
      background-color: #4CAF50;
      border: none;
      border-radius: 5px;
      color: white;
      padding: 10px 10px;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      cursor: pointer;
      margin-left: 10px;
      display: flex;
      align-items: center;
    }

    .container {
      font-family: Accuratist;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      border-top: 2px solid #121212;
      background-color: #121212;
    }

    title {
      font-family: Accuratist;
    }

    #result {
      overflow-y: scroll;
      font-family: Accuratist;
      color: white;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="favicon.ico" type="image/x-icon">

  <title>DerNeX</title>
</head>
<body>
<div class="mes-con">
 <div id="result">
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение</p>
  <p> Сообщение end</p>

  </div>
  <div class="container">
    <div class="input-container">
      <input type="text" id="myInput" placeholder="Сообщение…" oninput="handleInput(event)">
      <button class="button" onclick="sendRequest()">
        <img src="send.png" alt="Изображение">
      </button>
    </div>
  </div>
</div>

 
  <script type="text/javascript" src="/eel.js"></script>
  <script type="text/javascript">
    // Array to store previous responses
    const previousResponses = [];

    function handleInput(event) {
      if (event.inputType === 'insertParagraph') {
        document.getElementById('myInput').value += '\n';
      }
    }

    async function sendRequest() {
      const userInput = document.getElementById('myInput').value;
      const responseText = await eel.process_input(userInput)();

      // Add the current response to the array
      previousResponses.push(responseText);

      // Display previous responses in the result element
      const resultElement = document.getElementById('result');
      resultElement.innerHTML = previousResponses.map((response, index) => `<p>${response}</p>`).join('');
    }
  </script>
</body>
</html>

так хотел сделать?

БЛОГ НА HUSL

Как добавить ползунок для вертикального скрола на html

Ответы (1 шт):