Highcharts 4.0 iPhone/Сенсорный скроллинг

Question

Я недавно начал свой личный веб-сайт, grantmcgovern.com

Он хорошо выглядит в браузере и был построен, чтобы быть отзывчивыми для мобильных дисплеев, однако, Highcharts, оказывается проблемой для мобильных зрителей.

Я читал об этом происходит в прошлом, и решение должно было включать this script

Я пытался, но безуспешно. Я также попытался отключить мышеловку и т. Д., Но все равно не сигару.

Вот как я построения диаграммы с 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 
    }] 
}); 

А вот мой HTML блок, к которому он строит круговую диаграмму:

<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> 

А вот мой CSS, чтобы установить (который работает, когда Highchart отсутствует):

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

I ' m озадачен тем, почему мой сайт по-прежнему отказывается прокручивать с помощью Highcharts. Вы можете проверить это самостоятельно, предоставив grantmcgovern.com на своем iPhone/мобильном устройстве. Я признаю, что highchart не масштабируется правильно ... Это следующее исправление после этого.

Answer 1

Я нашел ошибку. Я использую библиотеку Skrollr, и, оказывается, вам нужно добавить тег в элемент html, называемый «skrollr-body», чтобы разрешить мобильную поддержку.

Смотреть это post