CSS - 如何更改滚动条高度答案

【问题标题】：CSS - How to change scrollbar heightCSS - 如何更改滚动条高度
【发布时间】：2021-03-11 12:18:29
【问题描述】：

我有一个具有属性“溢出：滚动”的块我想将滚动的高度从 https://ibb.co/gFyfDwT 更改为 https://ibb.co/SsByRXB

Lesson.jsx

import React from 'react';
import less from "./css/lesson.module.css";
import "./css/betaLesson.css";

export class Lessons extends React.Component {

    render() {
        return (
            <>
                <div className="abc">
                    <div className={less.wrapper}>
                        <div>
                            <div className={less.sidebar}>
                                <div>
                                    {listLessons}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

style.css

const sidebar: {
    width: 240px;
    overflow: scroll;
    height: 100%;
    background: #ffffff;
    padding: 15px 0px;
    position: fixed;
}

【问题讨论】：

将样式添加到您的问题不完整

标签： html css reactjs jsx stylesheet

【解决方案1】：

您可以在包含所有课程的 div 中添加另一个类，然后根据您的要求在其中添加一个高度，可能是 300%。

import React from 'react';
import less from "./css/lesson.module.css";
import "./css/betaLesson.css";

export class Lessons extends React.Component {

    render() {
        return (
            <>
                <div className="abc">
                    <div className={less.wrapper}>
                        <div>
                            <div className={less.sidebar}>
                                <div className={less.lessons}>
                                    {listLessons}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

const sidebar: {
    width: 240px;
    overflow: scroll;
    height: 100%;
    background: #ffffff;
    padding: 15px 0px;
    position: fixed;
}

const lessons: {
  height: 300% // or 2000px...
}

【讨论】：