想着很简单,直接在div中设置width、height。并添加属性“overflow:auto”。但实际运行是发现图片始终会换行,窗口只能上下滚动
后来找到问题的原因,是因为由于在div中直接添加图片,所以图片会适应该div的大小,从而自动换行。而要做到不换行的效果,则需要在div中嵌套一层div2,设置div2的width >div的width,由此保证:图片不会换行;在横轴方向溢出,从而出现横向滚动条。
在css设置可改变大小的div滚动条样式方法:
1.首先新建html文档,进入代码书写界面。
2.在</head>和<body>的里面写入代码,在<div>里面写入想要输入的内容</div>。
3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}
这里主要是设置外层轨道的形状和颜色。
4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}
这里主要是设置内层轨道的形状和颜色。
5.代码工作做完后,就可以查看效果,效果如下红框所示,滚动条设置完成。
如果要显示横线的滚动条,可以使用overflow-x:auto。auto的意思就是说,只有在div的内容的宽度大于div的宽度时,才出现滚动条。其他情况不出现。同样也可以将overflow-x设置成scroll,这样滚动条就会一直显示了。