通过css属性overflow设置元素出现滚动条
⼀个div容器,如果设定了⾼度值,⾥⾯内容的⾼度超过了div容器则内容会溢出,效果如下:
如果给该div容器设定了overflow: auto; 则当内容超过div时会默认出现滚动条,如果内容没有超过,滚动条不显⽰:
滚动条的样式可以通过css属性来修改,这个下次再说,这⾥想强调的是,当⼀个容器在页⾯的某⼀个固定位置,⽽⾥⾯的元素有很多时,需要给这个容器加滚动条,但笔主在⼯作时遇到个⼩坑,这个容器需要给定⼀个具体的⾼度值才可以出现滚动条,但这个容器如果作为⼀个React组件,被其他组件调⽤时,这个⾼度值是不固定的,所以需要它的⽗级组件给它传递⼀个props,但正常情况下,⼦组件的⾼度⽗组件也不知道,这时候,传递的这个props可以是页⾯的⾼度(100vh)减去页⾯其他元素的⾼度值,举例:
页⾯有⼀个头部还有内容区,内容区是需要滚动条的,所以⽗级组件可以传递⼀个头部组件的⾼度值给内容区组件,这个内容区的⾼度可以设定:
<Content style={{height: 100vh - this.props.headerHeight;}} />
复制代码
html横向滚动条样式
完美实现要求:)

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。