diff --git a/common/changes/office-ui-fabric-react/scrollablepane-scss2ms-pt2_2018-02-17-00-02.json b/common/changes/office-ui-fabric-react/scrollablepane-scss2ms-pt2_2018-02-17-00-02.json
new file mode 100644
index 0000000000000..3434a87a0341a
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/scrollablepane-scss2ms-pt2_2018-02-17-00-02.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Converting SCSS to MergeStyles step 2 - style conversion",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-brgarl@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/merge-styles/src/IRawStyleBase.ts b/packages/merge-styles/src/IRawStyleBase.ts
index a1e8ce30117a2..c0a2414ee3dcd 100644
--- a/packages/merge-styles/src/IRawStyleBase.ts
+++ b/packages/merge-styles/src/IRawStyleBase.ts
@@ -173,6 +173,11 @@ export interface IRawStyleBase extends IRawFontStyle {
    */
   WebkitFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased';
 
+  /**
+   * (Webkit specific) momentum scrolling on iOS devices
+   */
+  WebkitOverflowScrolling?: 'auto' | 'touch';
+
   /**
    * Aligns a flex container's lines within the flex container when there is extra space
    * in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
index 9494b41b8a29d..fba8e5fd19763 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
@@ -6,20 +6,24 @@ import * as PropTypes from 'prop-types';
 import {
   autobind,
   BaseComponent,
-  css
+  classNamesFunction,
+  customizable
 } from '../../Utilities';
 import {
   IScrollablePane,
   IScrollablePaneProps,
+  IScrollablePaneStyles,
+  IScrollablePaneStyleProps
 } from './ScrollablePane.types';
 import { Sticky } from '../../Sticky';
-import * as stylesImport from './ScrollablePane.scss';
-const styles: any = stylesImport;
 
 export interface IScrollablePaneContext {
   scrollablePane: PropTypes.Requireable<object>;
 }
 
+const getClassNames = classNamesFunction<IScrollablePaneStyleProps, IScrollablePaneStyles>();
+
+@customizable('ScrollablePane', ['theme'])
 export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}> implements IScrollablePane {
   public static childContextTypes: React.ValidationMap<IScrollablePaneContext> = {
     scrollablePane: PropTypes.object
@@ -82,17 +86,23 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
   }
 
   public render() {
-    const { className } = this.props;
+    const { className, theme, getStyles } = this.props;
+    const classNames = getClassNames(getStyles!,
+      {
+        theme: theme!,
+        className
+      }
+    );
 
     return (
       <div
         ref='root'
-        className={ css('ms-ScrollablePane', styles.root, className) }
+        className={ classNames.root }
         data-is-scrollable={ true }
       >
-        <div ref='stickyContainer' className={ styles.stickyContainer }>
-          <div ref='stickyAbove' className={ styles.stickyAbove } />
-          <div ref='stickyBelow' className={ styles.stickyBelow } />
+        <div ref='stickyContainer' className={ classNames.stickyContainer }>
+          <div ref='stickyAbove' className={ classNames.stickyAbove } />
+          <div ref='stickyBelow' className={ classNames.stickyBelow } />
         </div>
         { this.props.children }
       </div>
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss
deleted file mode 100644
index 43cc1c7576648..0000000000000
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import '../../common/common';
-
-.root {
-  overflow-y: auto;
-  max-height: inherit;
-  height: inherit;
-  -webkit-overflow-scrolling: touch;
-}
-
-.stickyContainer {
-  overflow: hidden;
-  position: absolute;
-  pointer-events: none;
-}
-
-.stickyAbove,
-.stickyBelow {
-  position: absolute;
-  pointer-events: auto;
-  width: 100%;
-  z-index: 1;
-}
-
-.stickyAbove {
-  top: 0;
-
-  @include high-contrast {
-    border-bottom: 1px solid WindowText;
-  }
-}
-
-.stickyBelow {
-  bottom: 0;
-
-  @include high-contrast {
-    border-top: 1px solid WindowText;
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
index c672585439093..814f6ff432b26 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
@@ -1,7 +1,8 @@
 import { IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePane.types';
 import {
+  HighContrastSelector,
   IStyle,
-  ITheme,
+  ITheme
 } from '../../Styling';
 
 export const getStyles = (
@@ -14,15 +15,53 @@ export const getStyles = (
 
   const { palette, semanticColors } = theme;
 
+  const AboveAndBelowStyles: IStyle = {
+    position: 'absolute',
+    pointerEvents: 'auto',
+    width: '100%',
+    zIndex: 1
+  };
+
   return ({
     root: [
       'ms-ScrollablePane',
       {
-        // Insert css properties
+        overflowY: 'auto',
+        maxHeight: 'inherit',
+        height: 'inherit',
+        WebkitOverflowScrolling: 'touch'
+      },
+      className
+    ],
+    stickyContainer: [
+      {
+        overflow: 'hidden',
+        position: 'absolute',
+        pointerEvents: 'none',
 
       }
     ],
-
-    // Insert className styles
+    stickyAbove: [
+      {
+        top: 0,
+        selectors: {
+          [HighContrastSelector]: {
+            borderBottom: '1px solid WindowText'
+          }
+        }
+      },
+      AboveAndBelowStyles
+    ],
+    stickyBelow: [
+      {
+        bottom: 0,
+        selectors: {
+          [HighContrastSelector]: {
+            borderTop: '1px solid WindowText'
+          }
+        }
+      },
+      AboveAndBelowStyles
+    ]
   });
 };
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts
index 037423a096c63..a048501a08ffb 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts
@@ -50,9 +50,19 @@ export interface IScrollablePaneStyleProps {
 
 export interface IScrollablePaneStyles {
   /**
-   * Style for the root element.
+   * Style set for the root element.
    */
   root: IStyle;
-
-  // Insert ScrollablePane classNames below
+  /**
+   * Style set for the stickyContainer element.
+   */
+  stickyContainer: IStyle;
+  /**
+   * Style set for the stickyAbove element.
+   */
+  stickyAbove: IStyle;
+  /**
+   * Style set for the stickyAbove element.
+   */
+  stickyBelow: IStyle;
 }
\ No newline at end of file