I'm trying to use the Lighting Path with Coach Class and get the scrollable arrows to work.  However, I can't set scrollable attribute on the inner div and I get this error:
 

Action failed: c:opportunityApprovalHistoryLightning$controller$popright [Cannot create property 'scrollLeft' on string '

How can I make the Chevon left right buttons scroll the div view appropriately? Here is the link to the LDS item I using for further context. I just want to be able to scroll left and right using the buttons.


Lightning Component

<aura:component controller="opportunityApprovalHistoryLightning" implements="lightning:actionOverride,force:hasRecordId,flexipage:availableForAllPageTypes" access="Global" >

 <lightning:layout horizontalAlign="center" multipleRows="true">
     <lightning:layoutItem flexibility="grow" size="12" padding="around-small">
    <lightning:buttonGroup >
       <lightning:button label="Submit for Approval" variant="brand" class="slds-m-top_medium" onclick="
            <div class="slds-path__scroller" role="application" aura:id = "scroller_outer">
                
               <div class="slds-path__scroller_inner" aura:id = "scroller_inner">
                  <ul class="slds-path__nav" role="tablist">
                     <li class="slds-path__item slds-is-incomplete" role="presentation">
                        <a aria-controls="path-content-1" aria-expanded="true" aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-1" role="tab" tabindex="-1">
                           <span class="slds-path__stage">
                             <lightning:icon iconName="utility:check" size="xx-small" />
                              <!--<span class="slds-assistive-text">Stage Complete</span>-->
                           </span>
                           <span class="slds-path__title">Sales Manager</span>
                        </a>
                     </li>
                     <li class="slds-path__item slds-is-incomplete " role="presentation">
                        <a aria-controls="path-content-2" aria-expanded="true" aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-2" role="tab" tabindex="-1">
                           <span class="slds-path__stage">
                              <lightning:icon iconName="utility:check" size="xx-small" />
                              <span class="slds-assistive-text">Stage Complete</span>
                           </span>
                           <span class="slds-path__title">Regional Segment Director</span>
                        </a>
                     </li>
                     <li class="slds-path__item slds-is-incomplete " role="presentation">
                        <a aria-controls="path-content-3" aria-expanded="true" aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-3" role="tab" tabindex="-1">
                           <span class="slds-path__stage">
                             <lightning:icon iconName="utility:check" size="xx-small" />
                              <span class="slds-assistive-text">Stage Complete</span>
                           </span>
                           <span class="slds-path__title">Product Marketing </span>
                        </a>
                     </li>
                     <li class="slds-path__item slds-is-incomplete" role="presentation">
                        <a aria-controls="path-content-4" aria-expanded="true" aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-4" role="tab" tabindex="-1">
                           <span class="slds-path__stage">
                            <lightning:icon iconName="utility:check" size="xx-small" />
                              <span class="slds-assistive-text">Stage Complete</span>
                           </span>
                           <span class="slds-path__title">Engineering</span>
                        </a>
                     </li>
                     <li class="slds-path__item slds-is-incomplete" role="presentation">
                        <a aria-controls="path-content-5" aria-expanded="true" aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-5" role="tab" tabindex="-1">
                           <span class="slds-path__stage">
                            <lightning:icon iconName="utility:check" size="xx-small" />
                              <span class="slds-assistive-text">Stage Complete</span>
                           </span>
                           <span class="slds-path__title">Product Marketing - Post Engineering</span>
                        </a>
                     </li>
                     <li class="slds-path__item slds-is-incomplete" role="presentation">
                        <a aria-controls="path-content-6" aria-expanded="true" aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-6" role="tab" tabindex="-1">
                           <span class="slds-path__stage">
                            <lightning:icon iconName="utility:check" size="xx-small" />
                              <span class="slds-assistive-text">Stage Complete</span>
                           </span>
                           <span class="slds-path__title">Business Segment Leader</span>
                        </a>
                     </li>
                     <li class="slds-path__item slds-is-incomplete" role="presentation">
                        <a aria-controls="path-content-7" aria-expanded="true" aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-7" role="tab" tabindex="-1">
                           <span class="slds-path__stage">
                            <lightning:icon iconName="utility:check" size="xx-small" />
                              <span class="slds-assistive-text">Stage Complete</span>
                           </span>
                           <span class="slds-path__title">Opportunity Owner</span>
                        </a>
                     </li>
                     <li class="slds-path__item slds-is-incomplete" role="presentation">
                        <a aria-controls="path-content-8" aria-expanded="true" aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-8" role="tab" tabindex="0">
                           <span class="slds-path__stage">
                            <lightning:icon iconName="utility:check" size="xx-small" />
                              <span class="slds-assistive-text">Current Stage:</span>
                           </span>
                           <span class="slds-path__title">Closed</span>
                        </a>
                     </li>
         

                  </ul>
                  <div class="slds-path__scroll-controls">
                     <lightning:button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Scroll left" tabindex="-1" onclick="{!c.popleft}">
                         <lightning:icon iconName="utility:chevronleft" size="xx-small" />
                        <span class="slds-assistive-text">Scroll left</span>
                     </lightning:button>
                     <lightning:button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Scroll right" tabindex="-1" onclick="{!c.popright}">
                          <lightning:icon iconName="utility:chevronright" size="xx-small" />
                        <span class="slds-assistive-text">Scroll right</span>
                     </lightning:button>
                  </div>
               </div>
                
            </div>
         </div>
         <div class="slds-grid slds-path__action">
            <span class="slds-path__stage-name">Stage: Unqualified</span>
            <button class="slds-button slds-button_brand slds-path__mark-complete">
               Approval Pending
            </button>
         </div>
      </div>
    

</aura:component>

Lightning

({
	
  
    popright : function(component, event, helper){
        var inner = component.find("scroller_inner").getElement().innerHTML;
        console.log(inner);
        inner.scrollLeft -= 5;


    }
})

​