Question

＆＃13;

.about {
    word-break: break-all;
    width: 100%;
    font-size: 18px;
    overflow-y: auto;
    max-height: 160px;
}

.custom-scroll-style::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.custom-scroll-style::-webkit-scrollbar {
 width: 10px;
 background-color: #F5F5F5;
}
.custom-scroll-style::-webkit-scrollbar-thumb {
 background-color: #ff253f;
 border: 2px solid #fff;
}

＆＃13;

<div class="custom-scroll-style about">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>

＆＃13;

我想在Mozilla和chrome中使用纯css滚动条，但这是Mozilla的一些问题。这只适用于chrome。如何解决这个问题？

Answer 1

::-webkit-scrollbar-*伪类仅适用于webkit（因此是特定于供应商的前缀）。遗憾的是，Gecko浏览器没有相应的功能，因此您必须回归到JavaScript解决方案。

另请参阅此问题（基本上是重复的）：Custom CSS Scrollbar for Firefox

Answer 2

我如何在Mozilla Firefox和Edge和Chrome中修复滚动条。我正在使用React，但没有它您也可以做到。

我希望我能帮助或与他人分享提示/提示。

我在做什么？

我正在设计聊天，我想让用户上下滚动以查看消息。

标记/ JSX格式

<div className="chat-component-parent-style">
   ...
</div>

样式

我用于Mozilla firefox的CSS样式

   .chat-component-parent-style {
       position: absolute; // position: fixed works
       height: 533px;  // very important
       width: 35%;
       overflow-y: scroll;   // add scroll behavior
       overscroll-behavior-y: contain;  // firefox need to understand the behavior
   }

我用于Microsoft Edge和Google Chrome的CSS样式

    .chat-component-parent-style::-webkit-scrollbar {
      width: 0.5em;
    }

    .chat-component-parent-style::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    .chat-component-parent-style::-webkit-scrollbar-thumb {
      background-color: darkgrey;
      outline: 1px solid slategrey;
    }

您可以对内容正文使用相同的CSS样式。

如果不起作用？

如果看不到效果，请尝试删除这些样式

  * {
     scrollbar-color: transparent transparent;  // in firefox the scroll was transparent so I could not see it.
   }

参考文献

https://mdn.github.io/css-examples/overscroll-behavior/

https://github.com/mdn/css-examples/tree/master/overscroll-behavior

滚动条无法在mozilla

2 个答案:

我在做什么？

如果不起作用？

参考文献