css怎么隐藏滚动条

  • Post author:
  • Post category:其他


法一:

①使用伪类隐藏滚动条(仅限Chrome与Safari)

②scrollbar-width: none;(仅限firefox)

③-ms-overflow-style: none;(仅限IE 10+)

/* 隐藏滚动条 */

.element {


width: 100%;

height: 72px;

box-sizing: border-box;

padding-top: 16px;

overflow-x: scroll; /* 设置溢出滚动 */

white-space: nowrap;

overflow-y: hidden;

/* 隐藏滚动条 */

scrollbar-width: none; /* firefox */

-ms-overflow-style: none; /* IE 10+ */

}

.element::-webkit-scrollbar {


display: none; /* Chrome Safari */

}

法二:

可滚动的容器外层再签套一个父盒子,父盒子设置overflow:hidde,再配合position,变相隐藏滚动条

<div class=”outer-container”>

<div class=”inner-container”>

</div>

</div>

.outer-container {


position: relative;

overflow: hidden;

}

.inner-container {


position: absolute;

left: 0;

overflow-x: hidden;

overflow-y: scroll;

}

/* for Chrome */

.inner-container::-webkit-scrollbar {


display: none;

}