retyui / react-quick-pinch-zoom

A react component that providing multi-touch gestures for zooming and dragging on any DOM element.
https://react-quick-pinch-zoom.netlify.app/
308 stars 46 forks source link

Cannot read property 'scrollLeft' of null #8

Closed bimb closed 4 years ago

bimb commented 4 years ago

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

Thanks

retyui commented 4 years ago

Can you provide example ?

bimb commented 4 years ago

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"));
});
retyui commented 4 years ago

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>
    );
  }
}