Javascript 如何在能够查看整个DIV的同时隐藏DIV滚动条

我正在动态地将新div添加到div容器中，我面临的问题是div可能只是太大了几个像素，因此产生了一个几乎没有用的滚动条，但是带有

overflow:hidden一小部分div被切断。我希望使div的高度稍微大一点，应用
height:100%不起作用。这就是我创建div的方式

function layerCreatorX(submission) { // creator for normal layers
    let unique_id = uuidv4() // created unique IDs
    let wrapDiv = document.createElement("div")
    wrapDiv.id = "wrapDiv" + unique_id

    let activeLayerIcon = document.createElement("IMG")
    activeLayerIcon.setAttribute("class", "activeLayerOff")
    activeLayerIcon.setAttribute("name", "activeLayerIcon")

    let invisibilityIcon = document.createElement("IMG")
    invisibilityIcon.setAttribute("class", "visibilityButtonPos invisibilityButton") // filter for grey
    invisibilityIcon.setAttribute("name", "invisibilityIcon")

    let visibilityIcon = document.createElement("IMG") 
    visibilityIcon.setAttribute("class", "visibilityButtonPos visibilityButtonOff")
    visibilityIcon.setAttribute("name", "visibilityIcon")

    let line = document.createElement("hr")
    line.setAttribute("style", "margin-top: 0px;")
    line.className = "greyLine" //grey line will go underneath the div

    let x = document.createElement("span")
    let t = document.createTextNode(submission)

    layerArray.push(unique_id)
    layerNamesForComparison.push(submission) //new name comparator
    x.className = "item item-layer"
    x.id = unique_id
    t.className = "noselect"

    x.appendChild(activeLayerIcon)
    x.appendChild(t)
    x.appendChild(invisibilityIcon)
    x.appendChild(visibilityIcon)
    wrapDiv.appendChild(x)
    wrapDiv.className = "LayerListDiv"

    document.querySelector('.LayerList').appendChild(wrapDiv)
    document.querySelector('.LayerList').appendChild(line)
}

这就是我创建它们时它们的外观：


我想去掉右边的垂直滚动条，但仍然可以查看整个div，如果我使用overflow hidden，底部的
行将被切断，我再也看不到它了

.LayerList CSS：

.LayerList {
        user-select: none;
        overflow: auto;
        right: -15px;
        width: 100%;
        max-height: calc(93% - 60px); /*This height has to stay*/
    }

编辑：添加了代码段


//模态
让modal=document.getElementById（“myModal”）
让btn=document.getElementById（“btnCreate”）
让span=document.getElementsByClassName（“关闭”）[0]
const div=document.getElementById（'layerList'）
//层变量
让我来
让分层
让我们看一看
让layerLock
让layerNote
让我们一起来吧
让layerJSObject=[]
//其他变量
let files//存储json文件
let data//存储json文件数据
让layerArray=[]//在数组中存储所有层id，以便于比较
让layerNamesForComparison=[]//存储图层的名称，这样就不会创建重复的图层
//米罗·瓦尔斯
让widgetName
让selectedWidgets=[]//侦听器变量将所有小部件信息存储在
让SelectedWidgetId=[]
//将存储当前选定小部件的id，直到将其保存到层中
让超对象
//DB vras
让环球托肯
让我来回答
让博迪德
让可用的纸板
让记录ID
//时间戳
让时间戳
算帐
让可用的结果
让我们在线模式
设activeLayer=0
让activeLayerState
//widgetDisplayer（）
//CSS变量
让xDiv
让DeleteLayerButton=document.getElementById（“btnDelete”）.disabled=true
让AddObjectsButton=document.getElementById（“btnMove”）.disabled=true
让RemoveObjectsButton=document.getElementById（“btnRemove”）.disabled=true
//------------------------------------------------------模态处理---------------------------------------------------------
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”
}
}
函数成功（）{
if（document.getElementById（“newLayerName”）.value==”）{
document.getElementById（'submitNewLayer'）。disabled=true；
} 
否则{
document.getElementById（'submitNewLayer'）。disabled=false；
}
}
//--------------------------------------------------图层命名/验证/创建/删除/等。。。功能--------------------
函数validateNewLayerName（）{//验证输入字段中的空输入
让输入=document.forms[“newLayerForm”][“newLayerName”]。值
let lengthLayers=layerArray.length
对于（i=0；i
（c^crypto.getRandomValues（新的Uint8Array（1））[0]&15>>c/4）。toString（16）
)
}
功能层Creatorx（提交）{//普通层的创建者
让unique_id=uuidv4（）//创建唯一id
让wrapDiv=document.createElement（“div”）
wrapDiv.id=“wrapDiv”+唯一\u id
让activeLayerIcon=document.createElement（“IMG”）
setAttribute（“类”、“activeLayerOff”）
setAttribute（“名称”、“activeLayerIcon”）
让invisibilityIcon=document.createElement（“IMG”）
invisibilityIcon.setAttribute（“类”，“visibilityButtonPos invisibilityButton”）//灰色过滤器
setAttribute（“名称”、“invisibilityIcon”）
让visibilityIcon=document.createElement（“IMG”）
visibilityIcon.setAttribute（“类”，“visibilityButtonPos visibilityButtonOff”）
setAttribute（“名称”、“可见性图标”）
let line=document.createElement（“hr”）
line.setAttribute（“样式”，“页边距顶部：0px；”）
line.className=“greyLine”//灰线将位于div下方
设x=document.createElement（“span”）
设t=document.createTextNode（提交）
layerArray.push（唯一的\u id）
layerNamesForComparison.push（submission）//新名称比较程序
x、 className=“项目层”
x、 id=唯一的\u id
t、 className=“noselect”
x、 appendChild（activeLayerIcon）
x、 儿童（t）
x、 appendChild（invisibilityIcon）
x、 appendChild（visibilityIcon）
wrapDiv.appendChild（x）
wrapDiv.className=“LayerListDiv”
document.querySelector（'.LayerList'）.appendChild（wrapDi
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}