S1ScrollerTest

ProfCalcTest.vf

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" standardController="Account">
    <style>
        html,
        html body {
            overflow: visible;
            -webkit-overflow-scrolling: touch;
        }
        
        body {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
        
        .hideEl {
        display: none !important;
        }
    </style>
    <apex:includeLightning />
    <div id="lightning" />
    <script>
    $Lightning.use("c:ProfitabilityCalculatorApp", function() {
        $Lightning.createComponent("c:ProfitabilityCalculator", {},
            "lightning",
            function(cmp) {
                // do some stuff
            });
    });
    </script>
</apex:page>

ProfitabilityCalculator.cmp

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    <c:S1ScrollWrapper topHeight="00" bottomHeight="00">
        <c:S1ScrollWrapperTop >
            <p>Top Bar</p>
        </c:S1ScrollWrapperTop>
        <c:S1ScrollWrapperBody >
        	<force:canvasApp developerName="ProfitabilityCalculator" />
        </c:S1ScrollWrapperBody>
        <c:S1ScrollWrapperBottom >
            <p>Bottom Bar</p>
        </c:S1ScrollWrapperBottom>
    </c:S1ScrollWrapper>
</aura:component>

ProfitabilityCalculatorApp.app

<aura:application extends="ltng:outApp" >
	<!--<c:ProfitabilityCalculator/>-->
	<aura:dependency resource="c:ProfitabilityCalculator"/>
</aura:application>