JS custom scrollbar thumb size issues in relation to the scroll width of the element

Question

JS custom scrollbar thumb size issues in relation to the scroll width of the element

I recently implemented a custom scrollbar for a component on my website.

To determine the length of the scrollbar thumb, I use the formula

viewportWidth / element.scrollWidth;

. This provides me with a percentage value that I then apply to the thumb element.

However, I encountered an issue where once the viewportWidth reaches a specific value (622px in my case), the scrollbar breaks. The content consists of boxes, each 350px wide with 16px margins on either side, resulting in each box taking approximately 382 pixels. When this happens, the scrollbar becomes longer than it should be, requiring the thumb to be moved outside the scrollbar range to scroll all the way left.

Below is the relevant code snippet:

...

Despite thorough checks, I cannot pinpoint exactly why the issue occurs. It seems that all the variables involved - scrollWidth, viewportWidth, xLocation, and getFullWidth() - provide accurate values. This leaves me puzzled as to the root cause of the problem.

If anyone has insights or suggestions on how to resolve this confusion, your input would be greatly appreciated.

javascript html css reactjs

Answer 1

Answer №1

const restrictRange = (value, min, max) => {
    return Math.min(Math.max(value, min), max);
  }

class ScrollableFrame extends React.Component {
  state = { isHolding: false, positionX: 0, frameWidth: 0 };
  lastPosition = 0;

  constructor(props) {
    super(props);
    this.trackRef = React.createRef();
    this.contentRef = React.createRef();
  }

  scrollCorrection = 0;

  scrollFrame = amount => {
    this.setState({
      positionX: restrictRange(
        this.state.positionX + amount,
        0,
        this.getTotalWidth() - this.getThumbWidthAbsolute() - this.scrollCorrection
      )
    });
  };

  componentDidMount = () => {
    document.body.addEventListener("mousemove", e => {
      if (this.state.isHolding) {
        let delta = e.pageX - this.lastPosition;
        this.scrollFrame(delta);
        this.lastPosition = e.pageX;
      }
    });
    document.body.addEventListener("mouseup", e => {
      this.setState({ isHolding: false });
    });
  };

  getTotalWidth = () => {
    return this.trackRef.current
      ? this.trackRef.current.clientWidth
      : this.defaultSize;
  };
  contentScrollWidth = () => {
    if (this.contentRef.current) {
      return this.contentRef.current.scrollWidth;
    }
  };
  contentViewportWidth = () => {
    if (this.contentRef.current) {
      return this.contentRef.current.clientWidth;
    }
  };

  getRelativeThumbWidth = () => {
    // console.log(this.getTotalWidth(), this.contentScrollWidth());
    return this.getTotalWidth() / this.contentScrollWidth();
  };

  getThumbWidthAbsolute = () => {
    return this.getRelativeThumbWidth() * this.getTotalWidth();
  };

  defaultSize = 100;
  render() {
    let calculatedWidth = this.getRelativeThumbWidth();
    let thumbPosition =
      this.state.positionX /
      (this.getTotalWidth() - this.getThumbWidthAbsolute() - this.scrollCorrection);

    console.log(thumbPosition);

    let scrollDistance =
      thumbPosition * (this.contentScrollWidth() - this.contentViewportWidth());

    // console.log(thumbPosition, scrollAmount);

    if (this.contentRef.current) {
      this.contentRef.current.scrollLeft = scrollDistance;
    }
    return (
      <div
        {...this.props}
        onWheel={e => {
          this.scrollFrame(e.deltaY);
        }}
        onTouchMove={e => {
          let newX = e.touches[0].clientX;
          this.scrollFrame(newX - this.lastPosition);
          this.lastPosition = newX;
        }}
      >
        <div ref={this.contentRef} className="overflow-hidden">
          {this.props.children}
        </div>
        <div className={"trackbar" + " mt-auto"} ref={this.trackRef}>
          <span
            style={{
              transform: `translateX(${this.state.positionX}px)`,
              width: calculatedWidth * 100 + "%"
            }}
            onMouseDown={e => {
              this.lastPosition = e.clientX;
              this.setState({ isHolding: true });
            }}
          ></span>
        </div>
      </div>
    );
  }
}

class GalleryItem extends React.Component {
  render() {
    return (
      <div
        className={
          "bg-black mx-4 w-350px h-48 flex-shrink-0 inline-block align-top " +
          "galleryItem"
        }
      ></div>
    );
  }
}

ReactDOM.render(
        <ScrollableFrame
                    className={
                      "transition-all duration-500 ease-in-out my-auto flex flex-col w-full px-8 "
                    }
                  >
                    <div className="inline-block whitespace-no-wrap mb-4 py-8 ">
                      <GalleryItem />
                      <GalleryItem />
                      <GalleryItem />
                      <GalleryItem />  
                      <GalleryItem />                  
                    </div>
                  </ScrollableFrame>,
  document.getElementById("app")
);

.trackbar {
  user-select: none;
  touch-action: none;
  margin-top: 0;
  height: 25px;
  background: black;
  display: flex;
  // padding: 5px;
  overflow: hidden;
}
  span {
    width: 200px;
    cursor: pointer;
    background: #b94747;
  }
  span:hover {
      background: #ff6060;
    }
.galleryItem {
width:350px;
background:black;
  transition: all 0.15s ease-in;
  cursor: pointer;
}
  .previewBox:hover {
    transition: all 0.15s ease-out;
    transform: scale(1.025);
  }

<div id = "app"></div>
<p class="px-8 mt-3">If you make your screen wider, you'll see that scrollbar works OK, if its not wide enough, its thumb will have to go out of viewport to work</p>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Here lies the issue

span {
    min-width: 200px; // this
    cursor: pointer;
    background: #b94747;
}

To resolve it, change it to width so it can be overridden. You may also need to update the width in the componentDidMount for the initial rendering.

Answer 2

const restrictRange = (value, min, max) => {
    return Math.min(Math.max(value, min), max);
  }

class ScrollableFrame extends React.Component {
  state = { isHolding: false, positionX: 0, frameWidth: 0 };
  lastPosition = 0;

  constructor(props) {
    super(props);
    this.trackRef = React.createRef();
    this.contentRef = React.createRef();
  }

  scrollCorrection = 0;

  scrollFrame = amount => {
    this.setState({
      positionX: restrictRange(
        this.state.positionX + amount,
        0,
        this.getTotalWidth() - this.getThumbWidthAbsolute() - this.scrollCorrection
      )
    });
  };

  componentDidMount = () => {
    document.body.addEventListener("mousemove", e => {
      if (this.state.isHolding) {
        let delta = e.pageX - this.lastPosition;
        this.scrollFrame(delta);
        this.lastPosition = e.pageX;
      }
    });
    document.body.addEventListener("mouseup", e => {
      this.setState({ isHolding: false });
    });
  };

  getTotalWidth = () => {
    return this.trackRef.current
      ? this.trackRef.current.clientWidth
      : this.defaultSize;
  };
  contentScrollWidth = () => {
    if (this.contentRef.current) {
      return this.contentRef.current.scrollWidth;
    }
  };
  contentViewportWidth = () => {
    if (this.contentRef.current) {
      return this.contentRef.current.clientWidth;
    }
  };

  getRelativeThumbWidth = () => {
    // console.log(this.getTotalWidth(), this.contentScrollWidth());
    return this.getTotalWidth() / this.contentScrollWidth();
  };

  getThumbWidthAbsolute = () => {
    return this.getRelativeThumbWidth() * this.getTotalWidth();
  };

  defaultSize = 100;
  render() {
    let calculatedWidth = this.getRelativeThumbWidth();
    let thumbPosition =
      this.state.positionX /
      (this.getTotalWidth() - this.getThumbWidthAbsolute() - this.scrollCorrection);

    console.log(thumbPosition);

    let scrollDistance =
      thumbPosition * (this.contentScrollWidth() - this.contentViewportWidth());

    // console.log(thumbPosition, scrollAmount);

    if (this.contentRef.current) {
      this.contentRef.current.scrollLeft = scrollDistance;
    }
    return (
      <div
        {...this.props}
        onWheel={e => {
          this.scrollFrame(e.deltaY);
        }}
        onTouchMove={e => {
          let newX = e.touches[0].clientX;
          this.scrollFrame(newX - this.lastPosition);
          this.lastPosition = newX;
        }}
      >
        <div ref={this.contentRef} className="overflow-hidden">
          {this.props.children}
        </div>
        <div className={"trackbar" + " mt-auto"} ref={this.trackRef}>
          <span
            style={{
              transform: `translateX(${this.state.positionX}px)`,
              width: calculatedWidth * 100 + "%"
            }}
            onMouseDown={e => {
              this.lastPosition = e.clientX;
              this.setState({ isHolding: true });
            }}
          ></span>
        </div>
      </div>
    );
  }
}

class GalleryItem extends React.Component {
  render() {
    return (
      <div
        className={
          "bg-black mx-4 w-350px h-48 flex-shrink-0 inline-block align-top " +
          "galleryItem"
        }
      ></div>
    );
  }
}

ReactDOM.render(
        <ScrollableFrame
                    className={
                      "transition-all duration-500 ease-in-out my-auto flex flex-col w-full px-8 "
                    }
                  >
                    <div className="inline-block whitespace-no-wrap mb-4 py-8 ">
                      <GalleryItem />
                      <GalleryItem />
                      <GalleryItem />
                      <GalleryItem />  
                      <GalleryItem />                  
                    </div>
                  </ScrollableFrame>,
  document.getElementById("app")
);

.trackbar {
  user-select: none;
  touch-action: none;
  margin-top: 0;
  height: 25px;
  background: black;
  display: flex;
  // padding: 5px;
  overflow: hidden;
}
  span {
    width: 200px;
    cursor: pointer;
    background: #b94747;
  }
  span:hover {
      background: #ff6060;
    }
.galleryItem {
width:350px;
background:black;
  transition: all 0.15s ease-in;
  cursor: pointer;
}
  .previewBox:hover {
    transition: all 0.15s ease-out;
    transform: scale(1.025);
  }

<div id = "app"></div>
<p class="px-8 mt-3">If you make your screen wider, you'll see that scrollbar works OK, if its not wide enough, its thumb will have to go out of viewport to work</p>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Here lies the issue

span {
    min-width: 200px; // this
    cursor: pointer;
    background: #b94747;
}

To resolve it, change it to width so it can be overridden. You may also need to update the width in the componentDidMount for the initial rendering.

JS custom scrollbar thumb size issues in relation to the scroll width of the element

Answer №1

Similar questions

Correcting the invalid syntax due to EOF issue

Display a sneak peek on a separate tab

Unable to change background-image as intended

Develop a search feature that automatically filters out special characters when searching through a

Switching CodeIgniter's controller to the primary controller within a designated div

sanitize-html does not support the <br> tag when using react-quill

Using app.js in a blade file can cause jQuery functions and libraries to malfunction

Trying out a React component that relies on parameters for connection

Error: $this.text is throwing a TypeError and is not working as a function

Highlight the parent name in the menu when I am on the corresponding child page

How to retrieve values from HTML class names using Javascript for loops but encountering issues

Could you specify the type of useFormik used in formik forms?

Ways to combine X and Y velocities into a single velocity

Combining two arrays filled with objects to form a collection of Objects on a Map

What is the best way to alternate $httpBackend when[method] declarations in unit tests to handle multiple requests?

What is the reason for including parentheses when evaluating JSON data?

Developing a progress bar with jQuery and Cascading Style Sheets (

No pathways can be established within Core UI Angular

Displaying the second image twice in a jQuery image slider

Angular CSS: ng-style applied to only one side, the other remains unaffected