隐藏滚动条而不是内容

debugcn 发表于 Dev

阿里亚曼

所以我试图隐藏滚动条，但是每个人都在谈论的方法是将overflow隐藏设置为该方法的问题是它也将内容隐藏在overflow隐藏中，这意味着您无法通过滚动代码来查看内容。

反正有吗

从我的草坪上离开

我们可能需要更多信息，但是您可以使用以下代码隐藏滚动条。

注：更换.hidden-scrollbar用body，如果你想将其应用到身体，而不是一个特定的元素。

.hidden-scrollbar {
    /* hides scrollbar on Firefox 64+ */
    scrollbar-width: none;

    /* Older supported microsoft browsers */
    -ms-overflow-style: none;
}

/* Hides scrollbar on webkit (Chrome 4+ and Edge 79+) */
.hidden-scrollbar::-webkit-scrollbar {
    display: none;
}

这是一个工作示例：

body {
    scrollbar-width: none;

    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
    display: none;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam adipiscing vitae proin sagittis. Venenatis urna cursus eget nunc scelerisque viverra mauris. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Potenti nullam ac tortor vitae purus faucibus ornare. Senectus et netus et malesuada fames ac. Molestie at elementum eu facilisis sed odio. Cursus in hac habitasse platea dictumst quisque sagittis purus sit. Nullam non nisi est sit amet facilisis magna etiam. Velit egestas dui id ornare arcu. Gravida quis blandit turpis cursus in hac habitasse. Orci ac auctor augue mauris augue neque gravida in. Congue eu consequat ac felis donec et. Quis enim lobortis scelerisque fermentum dui faucibus in ornare quam.
</p><p>
Posuere urna nec tincidunt praesent semper. Erat pellentesque adipiscing commodo elit at imperdiet dui. Sagittis orci a scelerisque purus. Amet nisl suscipit adipiscing bibendum est ultricies. Gravida arcu ac tortor dignissim convallis aenean et tortor. Tellus molestie nunc non blandit massa enim. Molestie a iaculis at erat pellentesque adipiscing commodo elit at. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi etiam. Sed adipiscing diam donec adipiscing tristique. Purus non enim praesent elementum facilisis leo vel fringilla. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Interdum varius sit amet mattis vulputate enim nulla aliquet. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Orci sagittis eu volutpat odio facilisis mauris sit. Sit amet commodo nulla facilisi nullam vehicula. Tristique senectus et netus et malesuada fames ac turpis.
</p><p>
Nunc congue nisi vitae suscipit tellus mauris a diam. Id faucibus nisl tincidunt eget. Sed risus ultricies tristique nulla. Eget sit amet tellus cras adipiscing enim eu turpis. Etiam non quam lacus suspendisse faucibus interdum. Aliquam sem et tortor consequat id porta nibh. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Adipiscing bibendum est ultricies integer. In cursus turpis massa tincidunt. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Tincidunt praesent semper feugiat nibh sed. Sem integer vitae justo eget magna fermentum. Ipsum faucibus vitae aliquet nec ullamcorper sit. Sem viverra aliquet eget sit. Ac tortor dignissim convallis aenean et tortor at risus viverra. Rutrum quisque non tellus orci ac auctor augue mauris augue. Amet facilisis magna etiam tempor orci eu lobortis elementum. Libero justo laoreet sit amet cursus sit amet.
</p><p>
Enim nunc faucibus a pellentesque sit. Nisl pretium fusce id velit. Nisl purus in mollis nunc sed id semper. Tellus mauris a diam maecenas sed enim ut sem. Velit egestas dui id ornare arcu odio ut sem nulla. Egestas diam in arcu cursus euismod quis viverra nibh. Id diam vel quam elementum pulvinar etiam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Consequat interdum varius sit amet. Nullam non nisi est sit amet facilisis magna.
</p><p>
Lectus vestibulum mattis ullamcorper velit sed. Elementum integer enim neque volutpat ac. Gravida rutrum quisque non tellus orci ac auctor augue. Massa vitae tortor condimentum lacinia quis vel eros donec ac. Blandit cursus risus at ultrices mi tempus. Nisl vel pretium lectus quam. Amet purus gravida quis blandit. Habitant morbi tristique senectus et netus et malesuada fames. Venenatis a condimentum vitae sapien pellentesque habitant morbi. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Ut ornare lectus sit amet est placerat. Ultrices tincidunt arcu non sodales neque. Sit amet est placerat in egestas erat imperdiet sed euismod. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Lectus nulla at volutpat diam ut venenatis. Massa vitae tortor condimentum lacinia quis. Pellentesque dignissim enim sit amet venenatis urna cursus. Quis lectus nulla at volutpat diam ut. Aenean sed adipiscing diam donec adipiscing tristique risus nec.
</p>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。