火狐浏览器隐藏了滚动条,但是就不可以滚动了,有没有啥解决办法?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了火狐浏览器隐藏了滚动条,但是就不可以滚动了,有没有啥解决办法?相关的知识,希望对你有一定的参考价值。

火狐浏览器使用 scrollbar-width: none; 隐藏了滚动条,但是就是不能滚动了,有没有什么解决办法?

参考技术A 首先你要把鼠标放到正确的位置,如果scrollbar-width: none不管用的话,我觉得你可以试一下scrollbar-width: 0。追问

scrollbar-width: none 可以把滚动条隐藏但是超出的部分就滚动不了,在谷歌上面可以,火狐就不行,scrollbar-width: 0 滚动条没有隐藏

追答

这个属性是给滚动条设置宽度的呀,宽度是0在视觉上也相当于隐藏,我是这么认为的。

css代码怎样改变火狐浏览器中滚动条样式

  CSS无法控制滚动条的样式。这里推荐几块滚动条美化的插件给你。
  
1. Windows:全屏窗口滚动插件

  该插件可以很好地实现全屏滚动,每滚动一次即为一屏。比如,用户浏览下一屏幕内容时,只需手动滚动到某一位置,该插件会自动滚动显示下一屏全部内容。对于浏览类似于PPT的内容时比较实用。

  2. Jquery Scroll Follow:滚动跟随插件
  该插件可以使DOM对象随着页面的滚动而移动。你可以设置滚动的速度、偏移等参数。

  3. 列表滚动插件
  该插件可以为任意列表添加上滚动效果。你可以自定义列表的滚动方向和滚动速度。

  4. Sly:灵活的基于ITEM的滚动插件

  SLY提供了很多基于项目(如图像/内容画廊)的滚动选项,支持水平和垂直方向的无限滚动。

5. Coverscroll

  仿苹果的CoverFlow设计,支持滚动条、鼠标滚轮和手势来滚动查看。

6. Sticky
 该插件可以让你的页面中的任何元素在滚动过程中始终可见

7. Tiny Scrollbar:一个轻量级的JQUERY插件

8. Sticky Float:另一个滚动跟随插件

9. Page Scroller:漂亮实用的滚动导航

10. Custom Srollbar:自定义内容滚动条插件

11. Scroll Up:一个轻量级的滚动到顶部插件
参考技术A 可以直接在css文件中 获得标签名或者是ID 或者class 的名字 然后赋给它新的属性 后面使用!important 进行结束,这样子就可以覆盖原来的属性了. 也可以看下原来样式的选择的节点是什么,它有个优先级,ID>CLASS>标签名, 也可以直接写到滚动的标签的style属性里面,这样它的优先级会>id. 参考技术B css修改不了ff的滚动条的
不过你可以模拟一个
可以参考这个div滚动条

参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?7=b&id=11573

本回答被提问者采纳
参考技术C FF不支持滚动条样式 如果非要样式效果,只能滚动效果用JS来做,然后用图片来代替向上 向下按钮 和滚动条 参考技术D @-moz-document url-prefix(http://),
url-prefix(https://),
url("chrome://browser/content/bookmarks/bookmarksPanel.xul"),
url("chrome://browser/content/browser.xul"),
url("chrome://browser/content/history/history-panel.xul")
/* THIS WHOLE CODE SECTION AUTOHIDES ONLY THE VERTICAL SCROLLBARS OF WEBPAGES */
scrollbar *
scrollbar scrollbarbutton display: none ! important;
scrollbar scrollbarbutton visibility: collapse !important

scrollbar[orient="vertical"]
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAACCAYAAABsfz2XAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAhSURBVHjaYvj//z8DMvb39/+PLoaMmRhIBAAAAAD//wMAB6Qizv4lfkgAAAAASUVORK5CYII=") ! important;

-moz-appearance: none !important;
background-color: transparent !important;
opacity: .75 !important;
min-width: 9px !important;
max-width: 9px !important;


/*CAN CHANGE SCROLLBAR WIDTH FROM Default 17px (MUST CHANGE BOTH min-width and max-width to exact same px */
/*Default vertical scrollbar width is 17px */
scrollbar[orient="vertical"]:hover

opacity: 1 !important;
-moz-appearance: none !important;
background-color: transparent !important;
min-width: 9px !important;
max-width: 9px !important;

/************************************************************************/

/* button you drag down the strip */

scrollbar thumb[orient="vertical"]

background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAnSURBVHjaYmQofPWfgQjwv0+UkYGBgYGJgUQwqmGkaAAAAAD//wMA+/4EFULQY9sAAAAASUVORK5CYII=") ! important;

-moz-appearance: none !important;
border-radius: 4px !important;
min-width: 8px !important;
max-width: 8px !important;
border: 1px !important;


/* HOVER:button you drag down the strip */

scrollbar thumb[orient="vertical"]:hover

background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAnSURBVHjaYmQofPWfgQjwv0+UkYGBgYGJgUQwqmGkaAAAAAD//wMA+/4EFULQY9sAAAAASUVORK5CYII=") ! important;

border-radius: 4px !important;
border: 0px !important;


/***************************************************************************/

/*////////////////////////////////////////////////////////////////////////////*/

/* THIS WHOLE CODE SECTION AUTOHIDES ONLY THE HORIZONTAL SCROLLBARS OF WEBPAGES */
/*can increase min-height 5px and max-height 5px to have more grab space for horizontal scrollbar (min-height and max-height must be exact same px)*/

scrollbar[orient="horizontal"]
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAMCAYAAABIvGxUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAmSURBVHjaYvz//z8DAwMDAxMDFGAyGP39/f8zMDAwMBKhGA8DMAB8qAf8L6w8LwAAAABJRU5ErkJggg==") ! important;

-moz-appearance: none !important;
background-color: transparent !important;
opacity: .75 !important;
min-height: 9px !important;
max-height: 9px !important;


/*CAN MAKE HORIZONTAL SCROLLBARS LESS HEIGHT when hovered BELOW:MUST HAVE min-height and max-height exact same px */
/* Default horizontal height is 17px */
scrollbar[orient="horizontal"]:hover

opacity: 1 !important;
-moz-appearance: none !important;
background-color: transparent !important;
min-height: 9px !important;
max-height: 9px !important;


/*////////////////////// bar /////////////////////////////////////////*/

/* button you drag down the strip */

scrollbar thumb[orient="horizontal"]

background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAmSURBVHjaYmQofPWfgQTAxEAiGNUwODQw/v//n7Y2AAAAAP//AwCb0AVuQc6u0wAAAABJRU5ErkJggg==") ! important;

-moz-appearance: none !important;
border-radius: 4px !important;
min-height: 8px !important;
max-height: 8px !important;
border: 1px !important;
margin-left: 0px !important;


/* HOVER:button you drag down the strip */

scrollbar thumb[orient="horizontal"]:hover

background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAmSURBVHjaYmQofPWfgQTAxEAiGNUwODQw/v//n7Y2AAAAAP//AwCb0AVuQc6u0wAAAABJRU5ErkJggg==") ! important;

border-radius: 4px !important;
border: 0px !important;


/*///////////////////////////////////////////////////////////////////*/

/* REMOVES THE SCROLLBAR CORNERS THAT CAN BE SEEN ON DARK COLORED WEBPAGES */

scrollcorneropacity: 0 !important;

scrollbar scrollcorner:hover background:transparent !important;

以上是关于火狐浏览器隐藏了滚动条,但是就不可以滚动了,有没有啥解决办法?的主要内容,如果未能解决你的问题,请参考以下文章

让火狐去掉右侧的滚动条,但有内容的高度过高时,还是可以使页面滚动的,只是看不见滚动条

这是控制浏览器的横向滚动条居中的代码,可是不兼容火狐,高手帮忙改改..

css代码怎样改变火狐浏览器中滚动条样式

css代码怎样改变火狐浏览器中滚动条样式

css样式问题:满足所有浏览器隐藏滚动条

在div+css为啥写滚动条效果在谷歌浏览器有用,而在火狐没用呢