如何使用jQuery从实体隐藏滚动条 [英] How to hide scrollbar from body using jquery

问题描述

我想通过使用Jquery隐藏滚动条.有人可以帮我吗?

I want to hide the scroll bar by using Jquery. Can anyone help me with it?

$
    ::-webkit-scrollbar { 
    display: none; 
}

这适用于Chrome浏览器，但是我希望所有浏览器都隐藏我的滚动条，我该怎么做?

This works for Chrome but I want my scroll to hide for all browsers, how can I do that?

推荐答案

您的代码仅适用于Chrome的原因是您使用的是-webkit-scrollbar. Chrome基于(已修改的)Webkit呈现引擎构建，因此此标记仅会影响Chrome(顺便说一下，也包括Safari).通常，-webkit-scrollbar属性用于设置滚动条的样式.要隐藏它们，请使用overflow属性.这是CSS解决方案:

The reason your code only works in Chrome is that you are using -webkit-scrollbar. Chrome is built upon the (modified) webkit rendering engine, so this tag will only affect Chrome (and Safari, incidentally). Typically, the -webkit-scrollbar property is used to style scrollbars. To hide them, instead use the overflow property. Here is a CSS solution:

body {
    overflow: hidden;
}

如果您想按照要求在jQuery中执行相同的操作，请尝试动态添加溢出属性，如下所示:

If you would like to do the same in jQuery, as asked, try adding the overflow property dynamically, like so:

$("body").css("overflow", "hidden");

请注意，您不必将此属性应用于整个身体.任何有效的选择器都可以！

Note that you do not have to apply this property to your entire body. Any valid selector will do!

如果您想隐藏滚动条，但仍允许滚动，则必须对它的操作有些棘手.尝试使用overflow: auto和一些正确的填充添加内部容器.这将允许滚动条从包含div的列表中推出，从而有效地将其隐藏.

If you are trying to hide the scrollbar, but still allow scrolling, you will have to get a little tricky with how you go about it. Try adding an inner container with overflow: auto and some right padding. This will allow the scrollbar to be pushed out of the containing div, effectively hiding it.

查看此小提琴以查看其实际效果: http://jsfiddle.net/zjfdvmLx/

Check out this fiddle to see it in action: http://jsfiddle.net/zjfdvmLx/

此方法的缺点是它并不完全跨浏览器友好.每个浏览器都会决定滚动条的宽度，并且滚动条可以随时更改.如果小提琴中使用的15px对于您的浏览器来说不够用，请增加该值.

The downside to this approach is that it is not entirely cross-browser friendly. Each browser decides how wide the scrollbar should be, and it could change at any time. If the 15px used in the fiddle is not enough for your browser, increase the value.

有关更多信息，请参见此答案.

See this answer for more information.

这篇关于如何使用jQuery从实体隐藏滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！