滚动条在 jquery 移动应用程序中不可见

Posted 2023-05-09

技术标签:

【中文标题】滚动条在 jquery 移动应用程序中不可见【英文标题】：Scrollbar not visible in jquery mobile app 【发布时间】：2012-07-29 23:59:00 【问题描述】：

我正在开发一个使用 phonegap 的 jquery 移动应用程序。在应用程序中，我在页面中动态加载列表视图，其中项目数大于单个屏幕上可以显示的项目数。在 android 模拟器 (Android 2.2) 中查看时，列表视图显示正常，我可以滑动或使用按钮向下滚动，但垂直滚动条不可见。我必须做任何特别的事情才能显示垂直滚动条吗？

当我在浏览器 (Firefox) 中打开页面的静态版本时，会显示滚动条，但在 android 模拟器上的应用程序中加载的同一个静态页面不会显示滚动条（即，看起来行为是一致的，与加载列表视图的动态性质无关）。

我正在使用 jquery 1.7.1、JQM 1.1.1、phonegap 2.0（所有最新版本）。

这是页面代码：

<!DOCTYPE html>
<html>
<head>
    <title>Conference List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="common/jquery.mobile-1.1.1.min.css" />
    <script type="text/javascript" charset="utf-8" src="common/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/cordova-2.0.0.js"></script>
</head>
<body>
<div id="conf-list" data-role="page">

    <div data-role="header">
        <a href="#" class="ui-btn-left" data-icon="delete" onclick="exit()">Exit</a>
        <a href="#" class="ui-btn-right" data-icon="refresh" onclick="downloadConfList(confFilePath)">Refresh</a>
        <span class="ui-title" />        
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role='listview' data-inset='true'>
                <li data-role='list-divider'>Available Conferences:</li>
                <li data-icon='false'>
                        <a href='javascript:openConference(2010041801)'>
                                <h4>Conference A1 2010</h4>
                                From 2010-04-18 to 2010-04-20<br />
                                Orlando, FL, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2010110701)'>
                                <h4>Conference A2 2010</h4>
                                From 2010-11-07 to 2010-11-10<br />
                                Austin, TX, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2011111301)'>
                                <h4>Conference A3 2011</h4>
                                From 2011-11-13 to 2011-11-16<br />
                                Charlotte, NC, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2012041501)'>
                                <h4>Conference A4 2012</h4>
                                From 2012-04-15 to 2012-04-17<br />
                                Huntington Beach, CA, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2012101401)'>
                                <h4>Conference A5 2012</h4>
                                From 2012-10-14 to 2012-10-17<br />
                                Phoenix, AZ, USA
                        </a>
                </li>

        </ul>
    </div><!-- /content -->

</div><!-- /page -->
</body>
</html>

【问题讨论】：

【参考方案1】：

很可能，这与您的 HTML、JS 或任何东西无关。大多数移动浏览器默认隐藏内联滚动条。我自己经历了多个项目。因为在 Safari 等移动浏览器中，您使用滑动动作进行滚动，因此它们不会显示任何可见的滚动条。我猜这是为了创造一种类似应用程序的体验。

相反，您需要向用户添加一些视觉队列，以便他们可以通过滑动或按钮滑动该区域。移动浏览器有意不在任何地方呈现滚动条，不管是内联的还是其他的。

【讨论】：

我认为你是对的。我意识到了这一点，并且已经停止为此寻找解决方案。你对你正在谈论的视觉线索有什么建议吗？请在您的答案中添加/编辑。谢谢。我认为我对目前的默认行为相当满意。我在顶部添加了一个计数，以给出视图中可用项目数量的预期（对于那些注意到计数的人）。【参考方案2】：

使用 iScroll 在所有设备（Android、ios、Windows、Blackberry 等）上进行完美滚动

网址-http://cubiq.org/iscroll-4

示例 - http://lab.cubiq.org/iscroll/examples/simple/

【讨论】：

【参考方案3】：

Chris Barr 的解决方案非常适合我：请看这个：

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

像这样在我的应用程序中使用

// HTML

<ul data-role="listview" id="my-select-view" data-filter="true" style="max-height: 250px; overflow: scroll">
</ul>

// Javascript 代码 - 在弹出的列表视图中添加滚动行为；有趣的是，添加事件侦听器就足够了，而无需在事件处理程序中添加代码来操作滚动值

$('#my-select-view').on("touchstart", function(event)                             scrollStartPos=this.scrollTop+event.touches[0].pageY;
                        );

$('#my-select-view').on("touchmove", function (event) 
                        );

【讨论】：

以上是关于滚动条在 jquery 移动应用程序中不可见的主要内容，如果未能解决你的问题，请参考以下文章

使 ScrollView 中的滚动条在 SwiftUI 中始终可见

自定义 CSS webkit 滚动条在 Firefox 浏览器中不起作用

使滚动条在uiscrollview中始终可见[重复]

如何使水平滚动条在 DT::datatable 中可见

可见性更改时，IFrame 滚动条在 chrome 上消失

css 滚动条在iOS中始终可见（垂直和水平）