作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试禁用弹跳效果,以便当您到达滚动 div 的末尾时,它会停止不动,根本不会弹跳。这在 mac safari 上运行良好,但在移动 safari 上运行良好。
到目前为止,我有这段代码,它确实停止了反弹效果,因此您不再看到灰色,但它所做的只是将反弹更改为我的背景颜色。
任何人都可以提供帮助,请不要说它是重复的,因为我已经解决了所有其他问题,这是迄今为止我想出的最好的问题。代码需要在手机上查看。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="cleartype" content="on">
<style type="text/css">
html, body {
overflow:hidden;
height:100%;
width:100%;
}
* {
border:0px;
margin:0px;
}
#page-wrapper {
width:100%;
height:100%;
}
#top {
background:red;
width:100%;
height:50%;
position:fixed;
z-index:1;
}
#bottom {
background:green;
width:100%;
height:50%;
position:fixed;
z-index:1;
}
#content-wrapper {
box-sizing:border-box;
height:100%;
width:100%;
overflow:scroll;
-webkit-overflow-scrolling:touch;
position:relative;
z-index:2;
background:pink;
}
</style>
</head>
<body>
<div id="page-wrapper">
<div id="top"></div>
<div id="bottom"></div>
<div id="content-wrapper" class="scrollable">
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>john</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>john</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>john</h1>
</div>
</div>
<script>
document.body.addEventListener('touchmove',function(e){
if(!$(e.target).hasClass("scrollable")) {
e.preventDefault();
}
});
</script>
</body>
</html>
最佳答案
Android 2.3以下浏览器不支持overflow:scroll属性。
关于javascript - 停止弹跳/橡皮筋/滚动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21378965/
我正在尝试禁用弹跳效果,以便当您到达滚动 div 的末尾时,它会停止不动,根本不会弹跳。这在 mac safari 上运行良好,但在移动 safari 上运行良好。 到目前为止,我有这段代码,它确实停
我希望我的用户能够在 Ruby on Rails 应用程序的图像中进行橡皮筋选择。有没有人看到任何好的插件可以做到这一点,或者让我很容易实现它? 最佳答案 我玩弄了一个 image cropper具有
我有一个 pixi.js html Canvas ,上面有数千个对象,我希望用户能够使用通常的矩形选择区域放大它。实现这一点的蛮力方法是在每次鼠标移动时绘制矩形并重新渲染整个舞台。但这似乎是在浪费 C
我目前已经使用鼠标事件实现了一个简单的选择框,并在鼠标拖动时重新绘制了一个矩形。这是我的代码: -(void)drawRect:(NSRect)dirtyRect { if (!NSEqualRect
我是一名优秀的程序员,十分优秀!