Javascript JS:；“鼠标盖”；停止在触摸设备上滚动

我将此代码添加到我的网站，以便根据用户是否滚动来隐藏/显示滚动条：

>>[CODEPEN] 老话

不用使用JS添加eventListener，只需在CSS上添加

：hover

属性即可

#菜单：悬停{
溢出：滚动！重要；
}

更新：改为更改滚动条的css

/////////////////////////////////////////////////
//瓦尔斯
var theMenu=document.getElementById（'menu'）；
var menuCurrentState=false；
/////////////////////////////////////////////////
//仅在滚动时显示滚动条
/////////////////////////////////////////////////
//菜单切换
函数切换（customID）{/*在所选元素上设置的函数，“customID”是ID
要使用按钮切换的元素。例如：
钮扣*/
var theToggledElement=document.getElementById（customID）；
如果（menuCurrentState===false）{//menuCurrentState太具体，无法作为通用切换，请稍后修复
menuCurrentState=true；//menuCurrentState太具体，无法作为通用切换，请稍后修复
toggledelement.style.left='0px'；
menuCancel.style.display='block'；
menuButton.style.backgroundColor='#ff1744'；
menu.style.boxShadow='0 1px 2px rgba（0,0,0,0.24），3px 5px 26px 0px rgba（0,0,0,0.24）'；
theMenu.style.transition='所有150ms立方贝塞尔（0.17,0.04,0.03,0.94）'；
log（'State设置为“true”，display设置为“visible”）；
}
否则，如果（menuCurrentState===true）{//menuCurrentState太具体，无法作为通用切换，请稍后修复
menuCurrentState=false；//menuCurrentState太具体，无法作为通用切换，请稍后修复
toggledelement.style.left='计算（-100%+（0.5cm+1.461544602cm+.5cm）'；
menuCancel.style.display='none'；
menuButton.style.background='#c6ff00'；
menu.style.boxShadow='0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23），3px 5px 26px 0px rgba（0,0,0,0.24）'；
theMenu.style.transition='所有75毫秒立方贝塞尔（0.17,0.04,0.03,0.94）'；
log（'状态设置为“false”且“display”设置为“none”）；
}
}

@导入url（'https://fonts.googleapis.com/css?family=Roboto:100，100i，300300i，400400i'）；
* {
字体系列：“Roboto”，无衬线；
字体大小：300；
大纲：无；
}
/*#######################################*/
/*菜单元素*/
#菜单{
位置：固定；
排名：0；
左-100%；
右：0；
底部：0；
右边距：2cm；
显示：内联；
背景色：#FFF176！重要；
颜色：#263238；
高度：calc（100%-1cm）；/*因为填料顶部和底部为0.5cm*/
宽度：300px；
填充：25px；
z指数：20！重要；
溢出：自动；
边框：0px实心#000！重要；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23），3px 5px 26px 0px rgba（0,0,0,0.24）；
过渡：所有150ms立方贝塞尔（0.17,0.04,0.03,0.94）；
}
#菜单：：-webkit滚动条{
宽度：0px；
背景：透明；
}
#菜单：悬停：：-webkit滚动条，#菜单：焦点：：-webkit滚动条，#菜单：活动：：-webkit滚动条，#菜单：已访问：：-webkit滚动条{
宽度：20px！重要；
背景：透明！重要；
}
/*#######################################*/
/*按钮来触发菜单*/
#菜单按钮内环{
位置：固定；
显示：内联块；
底部：0.5cm；
左：0.25厘米；
宽度：1cm；
高度：1厘米；
边界半径：50%；
背景：#c6ff00；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
-webkit用户选择：无；/*Safari*/
-moz用户选择：无；/*Firefox*/
-ms用户选择：无；/*IE10+/Edge*/
用户选择：无；/*标准*/
z指数：21！重要；
}
#菜单按钮滚动：悬停，#菜单按钮滚动：活动，#菜单按钮滚动：焦点{
盒影：0 14px 28px rgba（0,0,0,0.25），0 10px 10px rgba（0,0,0,0.22）；
转换：比例（1.1）；
}
/*#######################################*/
/*菜单项*/
.menuItem、.menuItem:悬停、.menuItem:活动、.menuItem:焦点{
显示：内联块；
/*浮动：左；
明确：两者皆有*/
边框底部：4px实心#000；
填充物：2厘米0.2厘米0.2厘米；
边缘顶部：.2cm；
右边距：.4cm；
边界半径：.1cm；
颜色：#FFD600；
背景色：#4A148C；
-webkit用户选择：无；/*Safari*/
-moz用户选择：无；/*Firefox*/
-ms用户选择：无；/*IE10+/Edge*/
用户选择：无；/*标准*/
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
}
svg.menuIcons{
显示：内联；
填充：0；
保证金：0；
文本对齐：居中；
宽度：1cm；
高度：1厘米；
背景色：透明；
}
path.menuIcons{
显示：内联；
填充：#FFD600；
填充不透明度：1；
填充：0；
保证金：0；
文本对齐：居中；
-webkit用户选择：无；/*Safari*/
-moz用户选择：无；/*Firefox*/
-ms用户选择：无；/*IE10+/Edge*/
用户选择：无；/*标准*/
}
.menuItem:悬停，.menuItem:活动，.menuItem:焦点{
盒影：0 14px 28px rgba（0,0,0,0.25），0 10px 10px rgba（0,0,0,0.22）；
转换：比例（1.1）；
}
/*#######################################*/
/*制作说明/信息的模板
眼睛容易一点*/
.注{
字体大小：16px；
线高：21px；
宽度：400px；
高度：自动；
保证金：1px；
填充：6px 0px 75px 42px；
位置：相对位置；
颜色：#444；
边框：1px实心#D2D2D2D2；
背景：#fff；
背景：-webkit渐变（线性，0.0，0.100%，从（#d9eaf3），颜色停止（4%，#fff））0.4px；
背景：-webkit线性梯度（顶部，#d9eaf3 0%，#fff 8%）0 4px；
背景：-moz
var theMenu = document.getElementById('menu');

window.addEventListener("load",function(){
    theMenu.style.overflow = 'hidden' ;
},false);

theMenu.addEventListener("mouseover",function() {
    theMenu.style.overflow = 'scroll' ;
},false);

theMenu.addEventListener("mouseout", function() {
    theMenu.style.overflow = 'hidden';
}, false);