How to use smoothscroll-polyfill - 10 common examples

// @flow
import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom'
import styled from 'styled-components'
import smoothscroll from 'smoothscroll-polyfill'
import { track } from 'analytics/segment'
import Box from 'components/base/Box'
import AngleUp from 'icons/AngleUp'
import { GrowScrollContext } from './base/GrowScroll'

smoothscroll.polyfill()

const Container = styled(Box)`
  position: fixed;
  z-index: 10;
  bottom: 100px;
  right: 20px;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(102, 102, 102, 0.25);
  cursor: pointer;
  height: 36px;
  width: 36px;
  color: ${p => p.theme.colors.palette.primary.contrastText};
  background-color: ${p => p.theme.colors.palette.primary.main};
  transition: all 0.5s;
  opacity: ${p => (p.visible ? 1 : 0)};
  pointer-events: ${p => (!p.visible ? 'none' : 'initial')};

import smoothScroll from 'smoothscroll-polyfill'
smoothScroll.polyfill()

// should be after React import for IE11
// 'require' used because inside condition
if(!!window.MSInputMethodContext && !!document.documentMode) { // IE11 check
  require('whatwg-fetch')

  // classList.toggle polyfill for IE
  DOMTokenList.prototype.toggle = function(token, force) {
    if(force === undefined) {
      force = !this.contains(token)
    }

    return this[force ? 'add' : 'remove'](token)
  }
}

import { imageHashes } from '../constants';
import decode from '../../../TypeScript/dist/decode';
import Velocity from 'velocity-animate';
import smoothscroll from 'smoothscroll-polyfill';

// kick off the polyfill!
smoothscroll.polyfill();

function hero() {
  const images = document.getElementsByClassName('image-bg');
  const imageContainer = document.getElementsByClassName('imagesContainer');
  const content = document.getElementsByClassName('content');

  function render(canvas, blurhash) {
    if (blurhash) {
      const pixels = decode(blurhash, 32, 32);
      if (pixels) {
        const ctx = canvas.getContext('2d');

        const imageData = new ImageData(pixels, 32, 32);
        ctx.putImageData(imageData, 0, 0);
      }
    }

import { Ruler } from '../ruler/ruler-service';
import { Screen } from '../screen/screen-service';
import { AppAutoscrollAnchor } from './auto-scroll/anchor';
import { ScrollWatcher } from './watcher.service';

// Polyfill smooth scrolling.
if (!GJ_IS_SSR) {
	require('smoothscroll-polyfill').polyfill();
}

export type ScrollContext = HTMLElement | HTMLDocument;

export class Scroll {
	static shouldAutoScroll = true;
	static autoscrollAnchor?: AppAutoscrollAnchor;

	// For SSR context we have to set this to undefined. No methods should be
	// called that would use the context.
	static watcher: ScrollWatcher;
	static offsetTop = 0;

	/**
	 * Sets the extra offset for scrolling. This can be used if there is a fixed
	 * nav on the top that we need to always offset from.

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import VueChatScroll from 'vue-chat-scroll'
import {ipcRenderer} from 'electron'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import App from './App'
import router from './router'
import store from './store'

import smoothscroll from 'smoothscroll-polyfill'
smoothscroll.polyfill()

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.config.productionTip = false

ipcRenderer.on('process.log', (e, data) => {
  store.dispatch('logLine', JSON.parse(data))
})
ipcRenderer.on('process.status', (e, status) => {
  store.dispatch('setStatus', JSON.parse(status))
})

Vue.use(BootstrapVue)
Vue.use(VueChatScroll)

/* eslint-disable no-new */
new Vue({

import React                from 'react';
import { render }           from 'react-dom';
import injectTpEventPlugin  from 'react-tap-event-plugin';
import { AppContainer }     from 'react-hot-loader';
import smoothScrollPolyfill from 'smoothscroll-polyfill';
import Root                 from './Root';
import 'animate.css';
import 'jquery';
import 'font-awesome/css/font-awesome.min.css'; // css is not managed by CSSModule
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './style/index.scss'; // import general styles, mixins etc...

// smoothscroll polyfill
smoothScrollPolyfill.polyfill();
// force polyfill (even if browser partially implements it)
window.__forceSmoothScrollPolyfill__ = true;

const ELEMENT_TO_BOOTSTRAP  = 'root';
const BootstrapedElement    = document.getElementById(ELEMENT_TO_BOOTSTRAP);

injectTpEventPlugin();

const renderApp = RootComponent => {
  render(
    
      
    ,
    BootstrapedElement

} from 'react-dom';
import {
  Provider,
} from 'react-redux';
import * as Sentry from '@sentry/electron';
import {
  ipcRenderer,
} from 'electron';

import App from './containers/App';
import store from './store';

import './assets/stylesheets/main.less';
import pjson from '../package.json';

require('smoothscroll-polyfill').polyfill();

if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: process.env.SENTRY_DSN,
    release: `${pjson.version}_${process.platform}`,
    enableNative: false,
    beforeSend(event, hint) {
      if (
        event?.message?.startsWith('Non-Error exception captured')
        && hint.originalException.error
        && hint.originalException.extra
      ) {
        Sentry.withScope((scope) => {
          scope.setExtra('nonErrorException', true);
          Sentry.captureException(
            hint.originalException.error,

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from 'react-apollo';
import { AppContainer } from 'react-hot-loader';
import { Router } from 'react-router';

import createAppStore from './store';
import client from './client';
import Routes from './routes';
import hashLinkScroll from './utils/hashLinkScroll';
import { initializeSentry } from './utils/sentry';
import { ScreenDimensionsProvider } from './components/common/screenDimensions';
import { browserHistory } from './router';
import GlobalErrorBoundary from './components/common/GlobalErrorBoundary';

require('smoothscroll-polyfill').polyfill();

const store = createAppStore();

const rootElement = document.getElementById('root');
initializeSentry(rootElement);

const renderAssembl = (routes) => {
  ReactDOM.render(
    
      
        
          
             {

import DesktopNotifications from "./components/DesktopNotifications"
import NotificationContainer from "./components/NotificationContainer"
import { AccountsProvider } from "./context/accounts"
import { CachingProviders } from "./context/caches"
import { NotificationsProvider } from "./context/notifications"
import { SettingsProvider } from "./context/settings"
import { SignatureDelegationProvider } from "./context/signatureDelegation"
import { StellarProvider } from "./context/stellar"
import AllAccountsPage from "./pages/all-accounts"
import AccountPage from "./pages/account"
import CreateAccountPage from "./pages/create-account"
import SettingsPage from "./pages/settings"
import handleSplashScreen from "./splash-screen"
import theme from "./theme"

SmoothScroll.polyfill()

const CreateMainnetAccount = () => 
const CreateTestnetAccount = () => 

const Providers = (props: { children: React.ReactNode }) => (
  
    
      
        
          
            
              
                {props.children}

export function render(_importApp: Function) {
  smoothscroll.polyfill();
  importApp = _importApp;

  ReactDOM.render(
    
      
        
          
        
      
    ,
    document.getElementById('root')
  );
}