将滚动条添加到div的末尾

Question

我正在做一个待办事项清单。在包含待办事项列表项的div中，每当我添加太多项并且它们到达底部时，它们总是越过div；像这样https://imgur.com/xU0Ub9U
我希望这些项目停在div的底部，然后继续进入滚动条，我该怎么做？

//Selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".icon");
const todoList = document.querySelector(".todo-list");
const dayOfWeek = document.querySelector(".date-txt h2");
const justDate = document.querySelector(".date-txt h3");

const today = new Date();

dayOfWeek.innerText = today.toLocaleString('default', {
  weekday: 'long'
});
justDate.innerText = today.toLocaleString('en-us', {
  month: 'short'
}) + " " + today.getDate() + " " + today.getFullYear();

//Event Listeners
todoList.addEventListener('click', deleteToDoItem);

todoInput.addEventListener('keypress', function(event) {
  if (event.key === "Enter") {
    //This is to prevent refresh
    event.preventDefault();

    //Trigger a click event on the button
    addToDoItem();
  }
});

//Functions
function addToDoItem(event) {
  //Create ToDo List Variables
  const todoDiv = document.createElement("div");
  const todoListItem = document.createElement("li");
  const completeButton = document.createElement("button");
  const deleteButton = document.createElement("button");

  //Add Classes
  todoDiv.classList.add("todo");

  todoListItem.classList.add("todo-item");
  todoListItem.innerText = todoInput.value;

  //completeButton.innerText = 'Yo';
  completeButton.classList.add("complete-btn");

  deleteButton.innerHTML = '<i class="fas fa-trash"></>';
  deleteButton.classList.add("delete-btn");

  //Append elements to Div
  todoDiv.appendChild(completeButton);
  todoDiv.appendChild(todoListItem);
  todoDiv.appendChild(deleteButton);

  todoList.appendChild(todoDiv);

  saveToLocalStorage(todoInput.value);

  //Clear value after adding
  todoInput.value = null;
}

function deleteToDoItem(e) {
  const item = e.target;

  // Delete/Remove ToDo Item
  if (item.classList[0] === "delete-btn") {
    const todo = item.parentElement;
    todo.classList.add("move");
    todo.addEventListener('transitionend', function() {
      todo.remove();
    });
  }

  //Completed
  if (item.classList[0] === "complete-btn") {
    const todo = item.parentElement;
    todo.classList.toggle("completed");
  }
}

function saveToLocalStorage(todo) {
  //Check whether a todo is already in
  let todos;
  if (localStorage.getItem('todos') === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem('todos'));
  }

  todos.push(todo);
  localStorage.setItem("todos", JSON.stringify(todos));
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #EA5F8E;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  color: #dbdada;
}

.container {
  background-color: #3D434B;
  width: 450px;
  height: 600px;
  border-radius: 10px;
  margin: 2% auto;
  box-shadow: 0px 5px 15px 0px #080808b9;
}

.date-txt {
  position: relative;
  top: 10%;
  text-align: center;
}

.date-txt h2 {
  font-size: 30px;
}

.date-txt h3 {
  color: #9A9FA7;
  font-weight: 500;
  font-size: 17px;
}

form {
  width: 100%;
  text-align: center;
  margin-top: 25%;
}

.input-field i {
  position: absolute;
}

.icon {
  color: #6d7075;
  padding: 11px 0px 0px 10px;
  transition: 0.2s;
}

.todo-input {
  background-color: #26292e;
  outline: none;
  border-radius: 5px;
  border: #17181b solid 2px;
  padding: 10px;
  padding-left: 35px;
  color: #ffffff;
  font-weight: 700;
  width: 70%;
}

.todo-input::placeholder {
  color: #6d7075;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
}


/*Everything ToDo*/

.todo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.todo-list {
  list-style: none;
  min-width: 83%;
}

.todo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #dbdada;
  margin: 1rem;
  padding: 1rem;
  border-radius: 5px;
  transition: all 0.4s ease;
}

.todo li {
  flex: 1;
  margin-left: 10px;
}

.delete-btn {
  color: #dbdada;
  background-color: transparent;
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  transition: 0.3s;
}

.delete-btn:hover {
  color: #fa6262;
}

.complete-btn {
  height: 20px;
  width: 20px;
  outline: none;
  background-color: #46484b;
  border: #29292b solid 2px;
  border-radius: 3px;
  transition: 0.2s;
}

.complete-btn:hover {
  border: #909096 solid 2px;
}

.completed {
  text-decoration: line-through;
  opacity: 0.3;
}

.fa-trash {
  pointer-events: none;
}

.move {
  transform: translate(8rem);
  transition: 0.5s ease;
  opacity: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./css/style.css" type="text/css">
  <script src="https://kit.fontawesome.com/6e2d4287f9.js" crossorigin="anonymous"></script>
  <title>Practice To Do List</title>
</head>

<body>
  <!--Main Content-->
  <div class="container">

    <!--Date n Time-->
    <div class="date-txt">
      <h2>Thursday</h2>
      <h3>Mar 23 2020</h3>
    </div>

    <!--To Do List Input-->
    <div class="input-field">
      <form>
        <i class="fas fa-align-left icon"></i>
        <input type="text" class="todo-input" placeholder="Add a task...">
      </form>
    </div>

    <!--To Do List Items-->
    <div class="todo-container">
      <ul class="todo-list">

      </ul>
    </div>
  </div>
  <script src="./js/script.js"></script>
</body>

</html>

Answer 1

将以下内容添加到.todo-list似乎可以解决您的问题。 使用auto隐藏滚动条，直到需要它为止。由于删除了动画，使用overflow-x隐藏了滚动。

max-height: 300px;
overflow-y: auto;
overflow-x: hidden;

//Selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".icon");
const todoList = document.querySelector(".todo-list");
const dayOfWeek = document.querySelector(".date-txt h2");
const justDate = document.querySelector(".date-txt h3");

const today = new Date();

dayOfWeek.innerText = today.toLocaleString('default', {
  weekday: 'long'
});
justDate.innerText = today.toLocaleString('en-us', {
  month: 'short'
}) + " " + today.getDate() + " " + today.getFullYear();

//Event Listeners
todoList.addEventListener('click', deleteToDoItem);

todoInput.addEventListener('keypress', function(event) {
  if (event.key === "Enter") {
    //This is to prevent refresh
    event.preventDefault();

    //Trigger a click event on the button
    addToDoItem();
  }
});

//Functions
function addToDoItem(event) {
  //Create ToDo List Variables
  const todoDiv = document.createElement("div");
  const todoListItem = document.createElement("li");
  const completeButton = document.createElement("button");
  const deleteButton = document.createElement("button");

  //Add Classes
  todoDiv.classList.add("todo");

  todoListItem.classList.add("todo-item");
  todoListItem.innerText = todoInput.value;

  //completeButton.innerText = 'Yo';
  completeButton.classList.add("complete-btn");

  deleteButton.innerHTML = '<i class="fas fa-trash"></>';
  deleteButton.classList.add("delete-btn");

  //Append elements to Div
  todoDiv.appendChild(completeButton);
  todoDiv.appendChild(todoListItem);
  todoDiv.appendChild(deleteButton);

  todoList.appendChild(todoDiv);

  saveToLocalStorage(todoInput.value);

  //Clear value after adding
  todoInput.value = null;
}

function deleteToDoItem(e) {
  const item = e.target;

  // Delete/Remove ToDo Item
  if (item.classList[0] === "delete-btn") {
    const todo = item.parentElement;
    todo.classList.add("move");
    todo.addEventListener('transitionend', function() {
      todo.remove();
    });
  }

  //Completed
  if (item.classList[0] === "complete-btn") {
    const todo = item.parentElement;
    todo.classList.toggle("completed");
  }
}

function saveToLocalStorage(todo) {
  //Check whether a todo is already in
  let todos;
  if (localStorage.getItem('todos') === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem('todos'));
  }

  todos.push(todo);
  localStorage.setItem("todos", JSON.stringify(todos));
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #EA5F8E;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  color: #dbdada;
}

.container {
  background-color: #3D434B;
  width: 450px;
  height: 600px;
  border-radius: 10px;
  margin: 2% auto;
  box-shadow: 0px 5px 15px 0px #080808b9;
}

.date-txt {
  position: relative;
  top: 10%;
  text-align: center;
}

.date-txt h2 {
  font-size: 30px;
}

.date-txt h3 {
  color: #9A9FA7;
  font-weight: 500;
  font-size: 17px;
}

form {
  width: 100%;
  text-align: center;
  margin-top: 25%;
}

.input-field i {
  position: absolute;
}

.icon {
  color: #6d7075;
  padding: 11px 0px 0px 10px;
  transition: 0.2s;
}

.todo-input {
  background-color: #26292e;
  outline: none;
  border-radius: 5px;
  border: #17181b solid 2px;
  padding: 10px;
  padding-left: 35px;
  color: #ffffff;
  font-weight: 700;
  width: 70%;
}

.todo-input::placeholder {
  color: #6d7075;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
}


/*Everything ToDo*/

.todo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.todo-list {
  list-style: none;
  min-width: 83%;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.todo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #dbdada;
  margin: 1rem;
  padding: 1rem;
  border-radius: 5px;
  transition: all 0.4s ease;
}

.todo li {
  flex: 1;
  margin-left: 10px;
  word-break: break-all;
}

.delete-btn {
  color: #dbdada;
  background-color: transparent;
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  transition: 0.3s;
}

.delete-btn:hover {
  color: #fa6262;
}

.complete-btn {
  height: 20px;
  width: 20px;
  outline: none;
  background-color: #46484b;
  border: #29292b solid 2px;
  border-radius: 3px;
  transition: 0.2s;
}

.complete-btn:hover {
  border: #909096 solid 2px;
}

.completed {
  text-decoration: line-through;
  opacity: 0.3;
}

.fa-trash {
  pointer-events: none;
}

.move {
  transform: translate(8rem);
  transition: 0.5s ease;
  opacity: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./css/style.css" type="text/css">
  <script src="https://kit.fontawesome.com/6e2d4287f9.js" crossorigin="anonymous"></script>
  <title>Practice To Do List</title>
</head>

<body>
  <!--Main Content-->
  <div class="container">

    <!--Date n Time-->
    <div class="date-txt">
      <h2>Thursday</h2>
      <h3>Mar 23 2020</h3>
    </div>

    <!--To Do List Input-->
    <div class="input-field">
      <form>
        <i class="fas fa-align-left icon"></i>
        <input type="text" class="todo-input" placeholder="Add a task...">
      </form>
    </div>

    <!--To Do List Items-->
    <div class="todo-container">
      <ul class="todo-list">

      </ul>
    </div>
  </div>
  <script src="./js/script.js"></script>
</body>

</html>