鼠标事件上下滚动月份，点击更换年份......

<div class="lmy-con-mm">
        <div class="lmy-list">
            <div class="lmy_year" style="display:block;">
                <h3>2021</h3>
                <div id="box" class="boM">
                    <div class="content">
                        <p><span>12 月</span></p>
                        <p><span>11 月</span></p>
                        <p><span>10 月</span></p>
                        <p class="on"><span>9 月</span></p>
                        <p><span>8 月</span></p>
                        <p><span>5 月</span></p>
                        <p><span>4 月</span></p>
                        <p><span>3 月</span></p>
                        <p><span>2 月</span></p>
                        <p><span>1 月</span></p>
                    </div>
                </div>
                <p class="yq"><a href="javascript:;">更晚</a></p>
                <p class="before"><a href="javascript:;">更早</a></p>
            </div>
            <div class="lmy_year">
                <h3>2020</h3>
                <div id="box" class="boM">
                    <div class="content">
                        <p class="on"><span>12 月</span></p>
                        <p><span>11 月</span></p>
                        <p><span>10 月</span></p>
                        <p><span>9 月</span></p>
                        <p><span>8 月</span></p>
                        <p><span>7 月</span></p>
                        <p><span>6 月</span></p>
                        <p><span>5 月</span></p>
                        <p><span>4 月</span></p>
                        <p><span>3 月</span></p>
                    </div>
                </div>
                <p class="yq"><a href="javascript:;">更晚</a></p>
                <p class="before"><a href="javascript:;">更早</a></p>
            </div>
            <div class="lmy_year">

                <h3>2019</h3>
                <div id="box" class="boM">
                    <div class="content">
                        <p class="on"><span>12 月</span></p>
                        <p><span>11 月</span></p>
                        <p><span>10 月</span></p>
                        <p><span>9 月</span></p>
                        <p><span>8 月</span></p>
                        <p><span>7 月</span></p>
                        <p><span>6 月</span></p>
                        <p><span>5 月</span></p>
                        <p><span>4 月</span></p>
                        <p><span>3 月</span></p>
                        <p><span>2 月</span></p>
                        <p><span>1 月</span></p>
                    </div>
                </div>
                <p class="yq"><a href="javascript:;">更晚</a></p>
                <p class="before"><a href="javascript:;">更早</a></p>
            </div>

            <!-- 右边联动的内容 -->
            <div class="my_classification">
                <div class="my_information">
                    <div class="information">
                        <h3>3333333333</h3>
                    </div>
                    <div class="information" style="display: none;">
                        <h3>1111111111</h3>
                    </div>
                </div>

            </div>
        </div>
    </div>

<script type="text/javascript">
    function tempFunction(value) {
        var content = document.getElementsByClassName("content")[value - 1];
        var box = document.getElementById("box");
        var Step = {
            value: 0,
            size: 20,
            maxVal: Math.ceil((content.offsetHeight - box.offsetHeight) / 20),
            getCurrentVal: function () {
                return this.value;
            },
            next: function () {
                if (this.value == this.maxVal) return;
                this.value++;
            },
            pre: function () {
                if (this.value == 0) return;
                this.value--;
            },
            getDistance: function () {
                return this.getCurrentVal() * this.size;
            },
            update: function () {
                this.maxVal = Math.ceil((content.offsetHeight - box.offsetHeight) / this.size);
            }
        }
        window.addEventListener("resize", function () {
            Step.update();
        });
        box.addEventListener("DOMMouseScroll", scrollfunc);
        box.addEventListener("mousewheel", scrollfunc);
        function scrollfunc(e) {
            if (e.type == "mousewheel") { //非FF
                e.wheelDelta < 0 ? Step.next() : Step.pre();
            } else { //FF
                e.detail > 0 ? Step.next() : Step.pre();
            }
            document.title = Step.getCurrentVal();
            box.scrollTop = Math.min(Step.getDistance(), content.offsetHeight - box.offsetHeight);
            //计算滚动比例
            var percent = box.scrollTop / (content.offsetHeight - box.offsetHeight);
            e.preventDefault();
            return false
        }
        // 月份对应的内容
        $('#box .content p').click(function () {
            var index = $(this).index()
            $(this).addClass('on').siblings().removeClass('on')
            $('.my_classification .my_information .information').eq(index).show().siblings().hide()
        })
    }
    window.onload = tempFunction(1)
    // 点击更早
    var i = 1;
    $('.before').click(function () {
        var ii = $(".lmy_year").length;
        if (i < ii) {
            $(this).parent(".lmy_year").find('.boM').attr("id", "temp")
            $(".lmy_year").hide();
            $(this).parent(".lmy_year").next().show();
            $(this).parent(".lmy_year").next().find('.boM').attr("id", "box")
            i++;
            tempFunction(i)
        } else {
            alert("已无更早笔迹。")
        }
    })
    // 点击以前
    $('.yq').click(function () {
        var ii = $(".lmy_year").length;
        if (i <= ii && i > 1) {
            $(this).parent(".lmy_year").find('.boM').attr("id", "temp")
            $(".lmy_year").hide();
            $(this).parent(".lmy_year").prev().show();
            $(this).parent(".lmy_year").prev().find('.boM').attr("id", "box")
            i--;
            tempFunction(i)
        } else {
            alert("已无更晚笔迹。")
        }
    })
</script>

<style>
    /* 时间轴 */
    .lmy_year {
        width: 195px;
        float: left;
        margin-top: 20px;
        margin-left: 12px;
    }
    .time_box {
        width: 120px;
        display: flex;
    }
    .time_line {
        width: 28px;
    }
    .time_circle {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background-color: #e86d22;
        margin: 0 auto;
    }
    .line-scale {
        background: url(images/line.png) no-repeat center center;
        height: 38px;
        width: 1px;
        margin: 0 auto;
    }
    .hollow {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        border: 1px solid #e86d22;
        margin: 0 auto;
    }
    .time_circlebg {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background-color: #b5b5b5;
        margin: 0 auto;
    }
    .cle {
        background: url(images/cle_01.png) no-repeat center center;
        width: 28px;
        height: 15px;
    }
    .month {
        margin-left: 12px;
    }
    .month p:first-child {
        margin-top: 44px;
    }
    .month .month_bg a {
        color: #e86d22;
        font-size: 18px;
    }
    .month p {
        margin-top: 26px;
    }
    .month p a {
        color: #666666;
        font-size: 18px;
    }
    .month p a:hover {
        color: #e86d22;
    }
    .s {
        margin-top: 50px;
        background-color: pink;
        width: 100px;
        height: 1500px;
    }
    .zw-foot {
        width: 100%;
        height: 90px;
        margin-top: 0;
    }
    .lmy-wrap {
        width: 100%;
        float: none;
        overflow: hidden;
    }
    .lmy-con {
        margin-bottom: 55px;
    }
    .lmy-con-m {
        padding-bottom: 0;
    }
    .content {
        padding-top: 45px;
        padding-bottom: 34px;
        background: url(images/cle_05.png) repeat-y 11px 0;
        position: relative;
    }
    .content:before {
        content: "";
        position: absolute;
        top: 0;
        left: 6px;
        width: 11px;
        height: 11px;
        background: url(images/cle_03.png) no-repeat;
    }
    .content:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 6px;
        width: 11px;
        height: 11px;
        background: url(images/cle_04.png) no-repeat;
    }
    .content p+p {
        margin-top: 30px;
    }
    .content p span {
        color: #666666;
        font-size: 18px;
        position: relative;
        padding-left: 42px;
        white-space: nowrap;
        background: url(images/cle_02.png) no-repeat 6px 50%;
        cursor: pointer;
    }
    .content p:hover span,
    .content p.on span {
        background: url(images/cle_01.png) no-repeat 0 50%;
        color: #e86d22;
    }
    #box {
        height: 373px;
        overflow: hidden;
        position: absolute;
        right: 58px;
        top: 10px;
    }
    #content p {
        width: 87px;
        height: 24px;
    }
    .content p {
        width: 87px;
        height: 24px;
    }
    .lmy_year {
        position: relative;
        height: 386px;
    }
    .before a {
        position: absolute;
        left: 0;
        bottom: 0;
        color: #666666;
        font-size: 18px;
    }
    .yq a {
        position: absolute;
        left: 0;
        bottom: 45px;
        color: #666666;
        font-size: 18px;
    }
    .lmy_year h3 {
        font-size: 18px;
        font-weight: bold;
        color: #666666;
    }
    .lmy_year {
        display: none;
    }
</style>