react-scroll-sync - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

dist/index.js

@@ -136,2 +136,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	      if (!_this.findPane(node, group)) {
+	        if (_this.panes[group].length > 0) {
+	          _this.syncScrollPosition(_this.panes[group][0], node);
+	        }
 	        _this.addEvents(node, group);
@@ -164,19 +167,2 @@ _this.panes[group].push(node);
 	    }, _this.syncScrollPositions = function (scrolledPane, group) {
-	      var scrollTop = scrolledPane.scrollTop,
-	          scrollHeight = scrolledPane.scrollHeight,
-	          clientHeight = scrolledPane.clientHeight,
-	          scrollLeft = scrolledPane.scrollLeft,
-	          scrollWidth = scrolledPane.scrollWidth,
-	          clientWidth = scrolledPane.clientWidth;
-	
-	
-	      var scrollTopOffset = scrollHeight - clientHeight;
-	      var scrollLeftOffset = scrollWidth - clientWidth;
-	
-	      var _this$props = _this.props,
-	          proportional = _this$props.proportional,
-	          vertical = _this$props.vertical,
-	          horizontal = _this$props.horizontal;
-	
-	
 	      _this.panes[group].forEach(function (pane) {
@@ -187,12 +173,3 @@ /* For all panes beside the currently scrolling one */
 	          _this.removeEvents(pane, group);
-	          /* Calculate the actual pane height */
-	          var paneHeight = pane.scrollHeight - clientHeight;
-	          var paneWidth = pane.scrollWidth - clientWidth;
-	          /* Adjust the scrollTop position of it accordingly */
-	          if (vertical && scrollTopOffset > 0) {
-	            pane.scrollTop = proportional ? paneHeight * scrollTop / scrollTopOffset : scrollTop; // eslint-disable-line
-	          }
-	          if (horizontal && scrollLeftOffset > 0) {
-	            pane.scrollLeft = proportional ? paneWidth * scrollLeft / scrollLeftOffset : scrollLeft; // eslint-disable-line
-	          }
+	          _this.syncScrollPosition(scrolledPane, pane);
 	          /* Re-attach event listeners after we're done scrolling */
@@ -216,2 +193,33 @@ window.requestAnimationFrame(function () {
 	  }, {
+	    key: 'syncScrollPosition',
+	    value: function syncScrollPosition(scrolledPane, pane) {
+	      var scrollTop = scrolledPane.scrollTop,
+	          scrollHeight = scrolledPane.scrollHeight,
+	          clientHeight = scrolledPane.clientHeight,
+	          scrollLeft = scrolledPane.scrollLeft,
+	          scrollWidth = scrolledPane.scrollWidth,
+	          clientWidth = scrolledPane.clientWidth;
+	
+	
+	      var scrollTopOffset = scrollHeight - clientHeight;
+	      var scrollLeftOffset = scrollWidth - clientWidth;
+	
+	      var _props = this.props,
+	          proportional = _props.proportional,
+	          vertical = _props.vertical,
+	          horizontal = _props.horizontal;
+	
+	      /* Calculate the actual pane height */
+	
+	      var paneHeight = pane.scrollHeight - clientHeight;
+	      var paneWidth = pane.scrollWidth - clientWidth;
+	      /* Adjust the scrollTop position of it accordingly */
+	      if (vertical && scrollTopOffset > 0) {
+	        pane.scrollTop = proportional ? paneHeight * scrollTop / scrollTopOffset : scrollTop; // eslint-disable-line
+	      }
+	      if (horizontal && scrollLeftOffset > 0) {
+	        pane.scrollLeft = proportional ? paneWidth * scrollLeft / scrollLeftOffset : scrollLeft; // eslint-disable-line
+	      }
+	    }
+	  }, {
 	    key: 'render',
@@ -218,0 +226,0 @@ value: function render() {

package.json

 {
   "name": "react-scroll-sync",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Syncronize scroll positions across multiple scrollable containers",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/ScrollSync.js

@@ -44,2 +44,5 @@ import React, { Component } from 'react'
     if (!this.findPane(node, group)) {
+      if (this.panes[group].length > 0) {
+        this.syncScrollPosition(this.panes[group][0], node)
+      }
       this.addEvents(node, group)
@@ -81,3 +84,3 @@ this.panes[group].push(node)
 
-  syncScrollPositions = (scrolledPane, group) => {
+  syncScrollPosition(scrolledPane, pane) {
     const {
@@ -97,2 +100,15 @@ scrollTop,
 
+    /* Calculate the actual pane height */
+    const paneHeight = pane.scrollHeight - clientHeight
+    const paneWidth = pane.scrollWidth - clientWidth
+    /* Adjust the scrollTop position of it accordingly */
+    if (vertical && scrollTopOffset > 0) {
+      pane.scrollTop = proportional ? (paneHeight * scrollTop) / scrollTopOffset : scrollTop // eslint-disable-line
+    }
+    if (horizontal && scrollLeftOffset > 0) {
+      pane.scrollLeft = proportional ? (paneWidth * scrollLeft) / scrollLeftOffset : scrollLeft // eslint-disable-line
+    }
+  }
+
+  syncScrollPositions = (scrolledPane, group) => {
     this.panes[group].forEach((pane) => {
@@ -103,12 +119,3 @@ /* For all panes beside the currently scrolling one */
         this.removeEvents(pane, group)
-        /* Calculate the actual pane height */
-        const paneHeight = pane.scrollHeight - clientHeight
-        const paneWidth = pane.scrollWidth - clientWidth
-        /* Adjust the scrollTop position of it accordingly */
-        if (vertical && scrollTopOffset > 0) {
-          pane.scrollTop = proportional ? (paneHeight * scrollTop) / scrollTopOffset : scrollTop // eslint-disable-line
-        }
-        if (horizontal && scrollLeftOffset > 0) {
-          pane.scrollLeft = proportional ? (paneWidth * scrollLeft) / scrollLeftOffset : scrollLeft // eslint-disable-line
-        }
+        this.syncScrollPosition(scrolledPane, pane)
         /* Re-attach event listeners after we're done scrolling */
@@ -115,0 +122,0 @@ window.requestAnimationFrame(() => {

No alert changes

Improved metrics

Total package byte prevSize

118835

0.69%

Lines of code

1427

0.99%

No dependency changes