使用 iPad Safari 的 Slickgrid 不显示滑块
我有一个 50 多行的 slickgrid，它可以在 Firefox、Safari 和 Chrome 等浏览器中正确显示右侧垂直滑块。
在使用 Safari 的 iPad 上，滑块不可见。 有解决办法来解决这个问题吗？
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid example 1: Basic grid</title>
<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
</head>
<body>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
<td valign="top">
<h2>Demonstrates:</h2>
<ul>
<li>basic grid with minimal configuration</li>
</ul>
</td>
</tr>
</table>
<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
<script language="JavaScript" src="../slick.grid.js"></script>
<script>
var grid;
var columns = [
{id:"title", name:"Title", field:"title"},
{id:"duration", name:"Duration", field:"duration"}
];
var options = {
enableCellNavigation: false,
enableColumnReorder: false
};
$(function() {
var data1 = [];
for (var i = 0; i < 50; i++) {
data1[i] = {
title: "Task " + i,
duration: "5 days"
};
}
grid = new Slick.Grid($("#myGrid"), data1, columns, options);
})
</script>
</body>
I have a slickgrid with 50+ rows which shows a right hand side vertical slider correctly in browsers like Firefox, Safari and Chrome.
On the iPad which uses Safari, the slider is not visible.
Is there a work around to solve this problem ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid example 1: Basic grid</title>
<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
</head>
<body>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
<td valign="top">
<h2>Demonstrates:</h2>
<ul>
<li>basic grid with minimal configuration</li>
</ul>
</td>
</tr>
</table>
<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
<script language="JavaScript" src="../slick.grid.js"></script>
<script>
var grid;
var columns = [
{id:"title", name:"Title", field:"title"},
{id:"duration", name:"Duration", field:"duration"}
];
var options = {
enableCellNavigation: false,
enableColumnReorder: false
};
$(function() {
var data1 = [];
for (var i = 0; i < 50; i++) {
data1[i] = {
title: "Task " + i,
duration: "5 days"
};
}
grid = new Slick.Grid($("#myGrid"), data1, columns, options);
})
</script>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不熟悉 Slickgrid，因此只能建议可能导致此问题的原因。完全有可能它在引擎盖下使用固定高度的 div，因此缺少滚动条。我收集了一些固定高度 div / 滚动场景在 iOS5 中已修复，但与此同时，您可能想阅读 Matteo Spinelli 的这篇文章以获取一些指导：
你可以用原生位置真正做什么：固定
I'm not familiar with Slickgrid so can only advise as to what may be causing this. It's entirely possible that under the hood it's using a fixed height div, hence the lack of scollbar. I gather some of the fixed height div / scrolling scenarios are fixed in iOS5, but in the meantime you might want to read this post from Matteo Spinelli for some pointers:
What you can really do with native position:fixed