首页 前端知识 CSS实现内容可以滚动,不显示滚动条

CSS实现内容可以滚动,不显示滚动条

2024-03-08 10:03:38 前端知识 前端哥 652 746 我要收藏

两种方式:

  • 使用 padding
  • 使用 ::webkit-scrollbar

第一种,使用padding

  • 先把 body 的滚动条隐藏,隐藏横向滚动条;
  • 把 main 元素的 overflow-y 设置为 scroll,让它可以垂直滚动;
  • 把 main 元素的右侧间距 padding-right 设置为滚动条的宽度。根据操作系统会有不同,windows 数值大些;

第二种,使用 ::webkit-scrollbar

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3426.html
标签
评论
发布的文章

JQuery对象操作

2024-04-01 10:04:46

jQuery 事件

2024-04-01 10:04:28

jQuery实现二级菜单

2024-04-01 10:04:16

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!