scrollbar-width：无； VS Overflow-x：隐藏

Question

似乎我可以同时使用这两个元素来隐藏元素的水平滚动条：

db.getCollection("repos").aggregate(

    // Pipeline
    [
        // Stage 1
        {
            $group: {
                _id: {
                    month: {
                        $month: {
                            $dateFromString: {
                                dateString: "$created_at"
                            }
                        }
                    },
                    day: {
                        $dayOfMonth: {
                            $dateFromString: {
                                dateString: "$created_at"
                            }
                        }
                    },
                    year: {
                        $year: {
                            $dateFromString: {
                                dateString: "$created_at"
                            }
                        }
                    }
                },
                languages: { $push:  { item: "$language"} },   
            }
        },

        // Stage 2
        {
            $project: {
                // specifications
                date: {
                     $dateFromParts: {
                        'year' : '$_id.year', 'month' : '$_id.month', 'day': '$_id.day'
                     }
                  },
                document: '$$ROOT'
            }
        },

        // Stage 3
        {
            $sort: { 
                $sort: {date: -1}
            }
        },

    ]
);

哪种是隐藏水平滚动条的更好解决方案？

Answer 1

overflow-x: hidden将剪辑父元素（例如页面）中的任何内容，该内容的宽度溢出父元素，并阻止用户水平滚动。 Source

scrollbar-width: none隐藏滚动条，但是内容仍然可以滚动。 Source

所以这取决于您要实现的目标。

Answer 2

有    scrollbar-width: none; 滚动条仍然存在，并且如果您想完全禁用滚动，则仍然可以滚动以查看是否溢出     overflow: hidden;