固定div，只在一个方向滚动(“如何在画布上做标尺？”)

<style>
    .scroll-container {
        width: 300px;
        height: 200px;
        overflow-x: scroll;
        overflow-y: hidden;
    }
</style>

<div class="scroll-container">
    <!-- 这里放置需要滚动的内容 -->
</div>

<canvas id="ruler" width="500" height="50"></canvas>

<script>
    var canvas = document.getElementById("ruler");
    var ctx = canvas.getContext("2d");

    // 绘制标尺线条
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(500, 0);
    ctx.stroke();

    // 绘制刻度
    for (var i = 0; i <= 500; i += 10) {
        ctx.beginPath();
        ctx.moveTo(i, 0);
        ctx.lineTo(i, 10);
        ctx.stroke();
    }
</script>