Javascript 在div的末尾添加一个滚动条

我正在列一张待办事项清单。在包含待办事项列表项的

div

中，每当我添加了太多的项并且它们到达底部时，它们总是在div上方；像这样
我希望这些项目停止在div的底部，并继续进入一个滚动条，我该怎么做呢

//选择器
const todoInput=document.querySelector（“.todo输入”）；
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=新日期（）；
dayOfWeek.innerText=today.toLocaleString（'默认值'{
工作日：“长”
});
justDate.innerText=today.toLocaleString（'en-us'{
月份：“短”
})+“”+today.getDate（）+“”+today.getFullYear（）；
//事件侦听器
todoList.addEventListener（'click'，deleteToDoItem）；
todoInput.addEventListener（'keypress'，函数（事件）{
如果（event.key==“输入”）{
//这是为了防止刷新
event.preventDefault（）；
//在按钮上触发单击事件
addToDoItem（）；
}
});
//功能
函数addToDoItem（事件）{
//创建待办事项列表变量
const todoDiv=document.createElement（“div”）；
const todoListItem=document.createElement（“li”）；
const completeButton=document.createElement（“按钮”）；
constDeleteButton=document.createElement（“按钮”）；
//添加类
todoDiv.classList.add（“todo”）；
添加（“todo项”）；
todoListItem.innerText=todoInput.value；
//completeButton.innerText='Yo'；
completeButton.classList.add（“completebtn”）；
deleteButton.innerHTML=''；
deleteButton.classList.add（“deletebtn”）；
//将元素附加到Div
todoDiv.appendChild（完成按钮）；
todoDiv.appendChild（todoListItem）；
toddiv.appendChild（删除按钮）；
托多利斯特。阿佩奇尔德（托多迪夫）；
saveToLocalStorage（todoInput.value）；
//添加后清除值
todoInput.value=null；
}
函数deleteToDoItem（e）{
常数项=e.目标；
//删除/删除待办事项
如果（item.classList[0]=“删除btn”）{
const todo=item.parentElement；
todo.classList.add（“移动”）；
todo.addEventListener（'transitionend'，function（）{
todo.remove（）；
});
}
//完成
if（item.classList[0]=“完成btn”）{
const todo=item.parentElement；
todo.classList.toggle（“已完成”）；
}
}
函数saveToLocalStorage（todo）{
//检查todo是否已在中
让托多；
if（localStorage.getItem（'todos'）==null）{
todos=[]；
}否则{
todos=JSON.parse（localStorage.getItem（'todos'）；
}
todo.push（todo）；
setItem（“todos”，JSON.stringify（todos））；
}

*{
填充：0；
保证金：0；
框大小：边框框；
}
身体{
背景色：#EA5F8E；
溢出：隐藏；
字体系列：“罂粟花”，无衬线；
颜色：#dbdada；
}
.集装箱{
背景色：#3D434B；
宽度：450px；
高度：600px；
边界半径：10px；
利润率：2%自动；
盒影：0px 5px 15px 0px#080808b9；
}
.date txt{
位置：相对位置；
排名前10%；
文本对齐：居中；
}
.date txt h2{
字体大小：30px；
}
.date txt h3{
颜色：#9A9FA7；
字号：500；
字号：17px；
}
形式{
宽度：100%；
文本对齐：居中；
利润率最高：25%；
}
.输入字段i{
位置：绝对位置；
}
.图标{
颜色：#6d7075；
填充：11px 0px 0px 10px；
过渡：0.2s；
}
.待办事项输入{
背景色：#26292e；
大纲：无；
边界半径：5px；
边框：#17181b实心2px；
填充：10px；
左侧填充：35px；
颜色：#ffffff；
字号：700；
宽度：70%；
}
.todo输入：：占位符{
颜色：#6d7075；
字体系列：“罂粟花”，无衬线；
字体大小：300；
}
/*要做的一切*/
.todo集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.待办事项清单{
列表样式：无；
最小宽度：83%；
}
托多先生{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
颜色：#dbdada；
保证金：1rem；
填充：1rem；
边界半径：5px；
过渡：所有0.4s缓解；
}
李东东先生{
弹性：1；
左边距：10px；
}
.删除btn{
颜色：#dbdada；
背景色：透明；
大纲：无；
边界：无；
光标：指针；
字号：18px；
过渡：0.3s；
}
.删除btn:悬停{
颜色：#fa6262；
}
.完整btn{
高度：20px；
宽度：20px；
大纲：无；
背景色：#46484b；
边框：29292b实心2px；
边界半径：3px；
过渡：0.2s；
}
.完成btn：悬停{
边框：#909096实心2px；
}
.完成{
文字装饰：线条贯通；
不透明度：0.3；
}
垃圾{
指针事件：无；
}
.搬家{
转换：转换（8rem）；
过渡：0.5s缓解；
不透明度：0；
}

练习待办事项清单
星期四
2020年3月23日

将以下内容添加到

待办事项列表中似乎可以解决您的问题。
使用
auto
隐藏滚动条，直到需要它为止。由于删除动画，使用了
overflow-x
隐藏滚动

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


//选择器
const todoInput=document.querySelector（“.todo输入”）；
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=新日期（）；
dayOfWeek.innerText=today.toLocaleString（'默认值'{
工作日：“长”
});
justDate.innerText=today.toLocaleString（'en-us'{
月份：“短”
})+“”+today.getDate（）+“”+today.getFullYear（）；
//事件侦听器
todoList.addEventListener（'click'，deleteToDoItem）；
todoInput.addEventListener（'keypress'，函数（事件）{
如果（event.key==“输入”）{
//这是为了防止刷新
event.preventDefault（）；
//在按钮上触发单击事件
addToDoItem（）；
}
});