retyui/react-quick-pinch-zoom

Cannot read property 'scrollLeft' of null

bimb opened this issue · 3 comments

bimb commented

I get always Cannot read property 'scrollLeft' of null, do you have any clue?

Thanks

Can you provide example ?

bimb commented

I'm using the basic example,

import QuickPinchZoom, { make3dTransformValue } from "react-quick-pinch-zoom";
 
class App extends React.Component {
quickPinchZoomRef = createRef();
  imgRef = createRef();
 
  onUpdate = ({ x, y, scale }) => {
    const { current: img } = this.imgRef;
    const value = make3dTransformValue({ x, y, scale });
    img.style.setProperty("transform", value);
    this.x = x;
    this.y = y;
    console.log({ x, y });
  };
 
  render() {
    return (
    div className="App"
      QuickPinchZoom 
        ref={this.quickPinchZoomRef}
          onUpdate={this.onUpdate.bind(this)}
          verticalPadding={200}
          horizontalPadding={200} 
        img
          ref={this.imgRef}
          src= https://user-images.githubusercontent.com/4661784/56037265-88219f00-5d37-11e9-95ef-9cb24be0190e.png 
        /
      /QuickPinchZoom
    /div
    );
  }
}

window.addEventListener("load", () => {
  render(<App />, document.getElementById("test"));
});

It works for me, don't see the problem

import React, { createRef } from "react";
import QuickPinchZoom, { make3dTransformValue } from "react-quick-pinch-zoom";

export default class App extends React.Component {
  imgRef = createRef();

  onUpdate = ({ x, y, scale }) => {
    const { current: img } = this.imgRef;

    const value = make3dTransformValue({ x, y, scale });

    img.style.setProperty("transform", value);
  };

  render() {
    return (
      <div className="App">
        <QuickPinchZoom
          onUpdate={this.onUpdate}
          verticalPadding={200}
          horizontalPadding={200}
        >
          <img
            ref={this.imgRef}
            src="https://user-images.githubusercontent.com/4661784/56037265-88219f00-5d37-11e9-95ef-9cb24be0190e.png"
          />
        </QuickPinchZoom>
      </div>
    );
  }
}