CSS的overflow上下滚动

Posted 2023-05-17

如何改不是左右

滚动，而是上下滚动？

你的例子中内容的宽度不够，高度有余。虽然overflow:scroll左右，上下滚动条都显示出来了，但是你输入的内容高度不够，所以上下滚动条基本没用。
你多输入几行就能看到上下也可以滚动了。
如果设置overflow:auto。滚动条就可以自动按情况显示或隐藏了。

另外，overflow-x，overflow-y可以单独设置左右或上下滚动。 参考技术A

把overflow改成overflow-y就行了

div
    width:100px;
    height:100px;
    margin:0 auto;
    overflow-y:scroll;

参考技术B .div1
overflow-y:scroll;

overflow-x:hidden;

word-wrap: break-word;<p style="
overflow-x: hidden;
overflow-y: scroll;
">本回答被提问者采纳 参考技术C overflow:scroll-x; scroll-y 参考技术D overflow-y:visible;
overflow-x:hidden;

侧边导航栏滚动条---CSS overflow实现

给侧边导航栏增加滚动条，elememt的滚动条好像不太好用，所以就使用CSS 的overflow来实现，overflow属性给父元素增加

HTML

 

 CSS

/*滚动条*/
.scroll {
  height: calc(100vh - 52px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: auto;
}

/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: #195fab;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px #072E97;
  border-radius: 10px;
  background-color: #195fab;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  background-color: rgba(240, 240, 240, .5);
}

效果呈现，长度超过屏幕，自动显示竖向滚动条