html – 如何防止webkit滚动条推挤div的内容?

前端之家收集整理的这篇文章主要介绍了html – 如何防止webkit滚动条推挤div的内容?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用webkit滚动条,并且正在运行到造型问题,因为Webkit滚动条将左侧的div的内容推送到内容溢出.

注意

>第一盒使用默认浏览器滚动条,不溢出(不错)
>第二盒使用webkit滚动条,最终破坏了布局. (坏/问题)

http://jsfiddle.net/ryeah/1/

任何想法,我在做错误的webkit滚动条导致div到/溢出.我们如何修复第二个盒子?谢谢

Webkit滚动条代码

  1. .Box2::-webkit-scrollbar {
  2. height: 16px;
  3. overflow: visible;
  4. width: 16px;
  5. }
  6. .Box2::-webkit-scrollbar-thumb {
  7. background-color: rgba(0,.2);
  8. background-clip: padding-Box;
  9. border: solid transparent;
  10. border-width: 1px 1px 1px 6px;
  11. min-height: 28px;
  12. padding: 100px 0 0;
  13. Box-shadow: inset 1px 1px 0 rgba(0,.1),inset 0 -1px 0 rgba(0,.07);
  14. }
  15. .Box2::-webkit-scrollbar-button {
  16. height: 0;
  17. width: 0;
  18. }
  19. .Box2::-webkit-scrollbar-track {
  20. background-clip: padding-Box;
  21. border: solid transparent;
  22. border-width: 0 0 0 4px;
  23. }
  24. .Box2::-webkit-scrollbar-corner {
  25. background: transparent;
  26. }

解决方法

嗯..我不能想到一个方法获取webkit滚动条在重叠.停止换行的一个解决方案是隐藏滚动条
  1. .Box2::-webkit-scrollbar {
  2. height: 16px;
  3. overflow: visible;
  4. width: 16px;
  5. display: none;
  6. }

另外您可以将UL的宽度设置为与框相同,以便使用溢出功能显示在滚动条下

  1. .Box ul {
  2. width: 149px;
  3. }

猜你在找的HTML相关文章