个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个移动网站，它有一个简单的带滚动的侧边菜单栏，当在 safari 上滚动菜单时它滞后很多(滚动困难)。
这是 html:
<body>
<div id="menu_background" onclick="toggleMenu()"></div>
<div id="menu">
<ul>
<li>
<div>item 1</div>
</li>
//other items goes here
</ul>
</div>
<div id="global_container">
//some content goes here
</div>
</body>
这是CSS:
#menu
{
position: absolute;
top: 0px;
bottom: 0px;
z-index: 100;
overflow: hidden;
display:none;
width: 0%;
padding: 1%;
}
和 javascript :
var menuShown = false;
function toggleMenu(){
var menu = document.getElementById("menu");
var menuBackground = document.getElementById("menu_background");
var globalContainer = document.getElementById("global_container");
if(!menuShown){
menuShown = true;
menuBackground.style.visibility = "visible" ;
menu.style.width="60%";
menu.style.display="block";
menu.style.overflowY="auto";
globalContainer.style.position="fixed";
globalContainer.style.right="62%";
}
else{
menuShown = false;
menuBackground.style.visibility = "hidden" ;
menu.style.width="0%";
menu.style.display="none";
menu.style.overflowY="hidden";
globalContainer.style.position="static";
}
}
我没有包括其余的 html，其中有一个带有触发 toggleMenu() javascript 函数的 onclick 操作的菜单按钮。
我也不想使用现成的 jQuery 插件或其他解决方案。
有什么建议吗？
最佳答案
在 css 中使用以下内容解决:
而不是在 css #menu 选择器中使用以下内容
overflow: hidden;
改用这个
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
关于javascript - 侧边菜单滚动在 safari 上滞后(ios)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18199257/
25
4
0
我正在创建自己的网站。使用无序列表制作我自己的标题 + 导航栏。 我遇到的问题是标题没有延伸到浏览器的边缘。唯一可行的方法是在 css“header”中使用。 position:absolute; 我
我是一名优秀的程序员,十分优秀！