Javascript Highcharts 4.0 iPhone/触摸屏滚动

我最近开通了我的个人网站grantmcgovern.com

它在浏览器中看起来很好，而且是为移动显示而设计的，然而，Highcharts对于移动观众来说却是个问题

我在过去读到过这种情况，解决办法是包括

我试过了，但没用。我也试过禁用捕鼠器等，但仍然没有雪茄

以下是我如何使用jQuery构建图表：

$('#log').highcharts({
    chart: {
        renderTo: 'container',
        plotBackgroundColor: null,
        plotShadow: false,
        backgroundColor:'rgba(255, 255, 255, 0)'
    },
    title: {
        text: "" // Imported from config.js
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.2f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'white'
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Code Construct',
        data: dataArrayFinal
    }]
});

---

我很困惑，为什么我的网站仍然拒绝滚动高图表。您可以在iPhone/移动设备上访问grantmcgovern.com，亲自查看。我认识到海图没有正确缩放。。。这是这之后的下一个修复

我找到了bug。我使用的是Skrollr库，结果证明您需要向html元素添加一个名为“Skrollr body”的标记，以支持移动应用

---

查看此

是否尝试从页面中删除图表？在Chrome设备模式和移动仿真中，我试图从控制台中删除包含div的图表，但仍然无法滚动您的网站。在安卓设备中，在页面完全加载之前，我可以滚动，但之后就不可能了。@KacperMadej我发现了这个bug。我使用的是Skrollr库，结果证明您需要向html元素添加一个名为“Skrollr body”的标记，以支持移动应用。

<div class="container-fluid" id="mainContainer">
    <div class="aboutMe">
        <div id="nameTitle" class="animated tada" id="name">
            <h1 id="titleName">Grant McGovern.</h1>
        </div>
        <div class="subTitle">
            <p>Coder.&emsp;&emsp;&emsp;Builder.&emsp;&emsp;&emsp;Learner.</p>
        </div>
        <hr>
        <div id="log" style="height:100%"></div>
        <div class="graphSubText">
            <a id="graphSubtext" href="https://github.com/g12mcgov/DevCharts">What is this? Checkout my project, DevCharts!</a>
        </div>s
        <hr>
    </div>
</div>

html, body {
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}