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

Ajax is capable of sending images as part of the data payload

Guide on how to selectively add middleware such as multer to a fresh express router

Encountering a type error in Typescript when assigning a transition component to a Material UI Snackbar

LeafletJS and ReactJS integration causing misalignment in tile ordering

Offspring maintain a certain position within the larger framework of their parent on a

Apply criteria to an array based on multiple attribute conditions

Fix the uneven shape border/outline

What methods do publications use to manage HTML5 banner advertisements?

Displaying various elements with distinct properties in React using ES6

What is a memory-saving method to clear an object in JavaScript?

Tips for showing a map in a concealed location: Embed the code in the appropriate location

Assign a class when a path is clicked using Leaflet.js

I'm currently troubleshooting the code for the Gallery project. The gallery is supposed to have 4x4 grids, but for some reason, the grids are

Issue with Material UI Stepper not maintaining state when proceeding forward or backward

Verify if the radio element is marked as selected in the AJAX reply

How can we utilize CSS floats to achieve maximum widths?

Extracting unique text values from nested div elements within list items using Selenium with Python

Increase the date by one day in the minimum date field using the date picker

Leveraging packages obtained from npm repositories

Using the Mousetrap binding on a nuxt.js page may not be effective