简单浏览器标尺

import React, { useEffect, useState, useCallback } from 'react';
import styles from './index.less';
import _ from 'lodash';

export default () => {
  const [xCount, setX] = useState(0);
  const [yCount, setY] = useState(0);

  useEffect(() => {
    const rule = document.getElementById('rule');
    const resizeObserver = new ResizeObserver((entries) => {
      entries.forEach((item) => {
        const { width, height } = item.contentRect;
        setX(Math.ceil(width / 100));
        setY(Math.ceil(height / 100));
      });
    });
    resizeObserver.observe(rule);

    return () => {
      resizeObserver.unobserve(rule);
    };
  }, []);

  const getScale = useCallback((count, prop) => {
    let compontents = [];
    for (let i = 0; i <= count; i++) {
      compontents.push(
        <span
          key={`${prop}_${i}`}
          style={{
            [prop]: i * 100,
            transform: `translate(-50%, -50%)`,
            position: 'absolute',
          }}
        >
          {i * 100}
        </span>,
      );
    }
    return compontents;
  }, []);

  return (
    <div className={styles.box} id="rule">
      <div className={styles.xRules}>
        <div style={{ position: 'relative', paddingTop: 20 }}>
          {getScale(xCount, 'left')}
        </div>
      </div>
      <div className={styles.yRules}>
        <div style={{ position: 'relative', paddingLeft: 20 }}>
          {getScale(yCount, 'top')}
        </div>
      </div>
      <div className={styles.left}></div>
      <div className={styles.right}>
        <div id="test" className={styles.player}></div>
      </div>
    </div>
  );
};

.box {
  width: 100%;
  height: 100%;
  background: rgb(121, 242, 157);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;

  .xRules {
    position: absolute;
    width: 100%;
    white-space: nowrap;
    height: 20px;
    left: 0;
    top: 0;
    background-image: repeating-linear-gradient(
        to right,
        #000000 0,
        #000000 0.05em,
        transparent 0,
        transparent 100px
      ),
      repeating-linear-gradient(
        to right,
        #000000 0,
        #000000 0.05em,
        transparent 0,
        transparent 50px
      ),
      repeating-linear-gradient(
        to right,
        #000000 0,
        #000000 0.05em,
        transparent 0,
        transparent 10px
      );
    background-size: 100% 16px, 100% 8px, 100% 4px;
    background-repeat: no-repeat;
  }

  .yRules {
    position: absolute;
    width: 20px;
    height: 100%;
    left: 0;
    top: 0;

    background-image: repeating-linear-gradient(
        to bottom,
        #000000 0,
        #000000 0.05em,
        transparent 0,
        transparent 100px
      ),
      repeating-linear-gradient(
        to bottom,
        #000000 0,
        #000000 0.05em,
        transparent 0,
        transparent 50px
      ),
      repeating-linear-gradient(
        to bottom,
        #000000 0,
        #000000 0.05em,
        transparent 0,
        transparent 10px
      );
    background-size: 16px 100%, 8px 100%, 4px 100%;
    background-repeat: no-repeat;
  }

  .left {
    width: 300px;
    height: 100%;
    background-color: red;
  }

  .right {
    flex: 1;
    height: 100%;
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;

    .player {
      width: 50%;
      height: 50%;
      background-color: white;
      z-index: 99;
    }
  }
}