html - 为移动 View 启用触摸滚动，Bokeh 应用程序

Question

我有一个网络应用程序，使用 Bokeh 创建并托管于 Heroku .我最近为该应用创建了一种移动样式，可在此处查看:

https://btac-web-plots.herokuapp.com/avyview?style=snowpacktracker-mobile

但是，在 iOS 移动设备上查看时，单指触摸滚动不起作用。作为一种 hack 解决方法，我在我的 html 文件 (index.html) 的 .invcontent-wrapper 标签中设置了 width: 95% .这会在右侧显示一条垂直的背景 strip ，触摸滚动功能在这里发挥作用，就像传统的滚动条一样。我还在垂直条上添加了向上和向下箭头，以引导用户将其用作滚动条。

如何为整个屏幕启用触摸滚动？问题可能是返回的 Bokeh 文档不允许触摸滚动交互...？

我正在使用 directory format在 Bokeh(利用 Bokeh 服务器)中，我的 index.html Jinja 模板文件包含以下相关部分:

CSS:

        {% if display_style|string() == "snowpacktracker-mobile" %}
          <style>
            html {
              width: 100%;
              height: 100%;
            }
            body {
              width: 100%;
              height: 100%;
              margin: auto;
              background-color: lightgray;
              overflow-y: scroll;
              -webkit-overflow-scrolling: touch;
              float: left;
            }
           .invcontent-wrapper {
             padding: 0px;
             min-height: 200px;
             width: 95%; /*allows for exposed background on the side*/
             position: relative;
            }
            container { /*this holds arrows so the user knows to scroll*/
              width: 100%;
              height: 100%;
            }
            .a { /*up arrow*/
              border-style: solid;
              border-width: 0 3px 3px 0;
              border-color: rgba(0,0,0,0.6);
              display: inline-block;
              padding: 3px;
              position: fixed;
              top: 20px;
              right: 1.5%;
              transform: rotate(-135deg);
              -webkit-transform: rotate(-135deg);
            }
            .b { /*down arrow*/
                border-style: solid;
                border-width: 0 3px 3px 0;
                border-color: rgba(0,0,0,0.6);
                display: inline-block;
                padding: 3px;
                position: fixed;
                top: 40px;
                right: 1.5%;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
            }
          </style>        
        {% endif %}

html:

        {% if display_style|string() == "snowpacktracker-mobile" %}
          <div class="invcontent-wrapper"  id="tbc-id">
            {{ plot_div|indent(8) }} 
            {{ plot_script|indent(8) }}
          </div>
          <div id="container">
            <div class="a"></div>
            <div class="b"></div>
          </div>
        {% endif %}

id="tbc-id" 指的是我正在使用的 javascript 加载微调器 (var target = document.getElementById('tbc-id'); ).

虽然是次要问题，但我也无法在 iOS 上使用双指张开缩放手势进行放大。

Answer 1

该错误肯定来自 -webkit-overflow-scrolling: touch; 属性。您不是唯一遇到问题的人:

Since updating to IOS8, -webkit-overflow-scrolling: touch stops you being able to scroll whatsoever, and the only way I have been able to fix this so far is by removing -webkit-overflow-scrolling: touch

-webkit-overflow-scrolling: touch; breaks in Apple's iOS8

但是，在 Safari CSS Reference , Apple 似乎说它在 iOs 5.0 及更高版本 上受支持:

Availability:
Available in iOS 5.0 and later.

Support Level:
Under development

但是，我们可以在MDN引用中看到:

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

-webkit-overflow-scrolling - MDN

长话短说

这不是编码问题，它来自于这种非标准的 CSS 样式。尝试将其删除，然后查看下面如何增强滚动效果。

我有帮助吗？

---

这里有一些其他的引用资料:

• WebKit-only properties - MDN

• -webkit-overflow-scrolling: touch; breaks in Apple's iOS8 - SO

  The solution I found was to remove all the CSS that tricks the browser into using the GPU:

   -webkit-transform: translateZ(0px);
   -webkit-transform: translate3d(0,0,0);
   -webkit-perspective: 1000;