如何始终在浏览器中显示垂直滚动条?

我想始终在我的网页上显示垂直滚动条。 是否有可能使用JavaScript? 我认为这是可能的使用JavaScript或jQuery。 我想要垂直滚动条是否有足够的内容显示或不。

谢谢。

7 Solutions collect form web for “如何始终在浏览器中显示垂直滚动条?”

jQuery不应该是必需的。 你可以尝试添加CSS:

body {overflow-y:scroll;} 

这适用于最新的浏览器,甚至IE6。

只需要注意一点:在OS X Lion中,设置为“滚动”的溢出行为更像是自动的,滚动条只会在使用时显示。 不使用时会消失。 所以,如果任何上述解决scheme似乎没有工作,这可能是为什么。

这是你需要解决的问题:

 ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); } 

你可以相应地devise它。

只要使用CSS。

 body { overflow-y: scroll; } 

设置一个包含divoverflow属性 scroll

尝试在你的身体标签的onload方法上调用一个函数,并在该函数中改变这个body的样式document.body.style.overflow ='scroll'; 你也可能需要设置你的HTML的宽度,因为这也会显示水平滚动条

你的html文件看起来像这样

 <script language="javascript"> function showscroll() { document.body.style.overflow = 'scroll'; } </script> </head> <body onload="showscroll()"> 

这是一个方法。 这不仅会提供滚动条容器,而且即使内容不够(根据您的要求)也会显示滚动条。 也将工作在iPhone和Android设备以及..

 <style> .scrollholder { position: relative; width: 310px; height: 350px; overflow: auto; z-index: 1; } </style> <script> function isTouchDevice() { try { document.createEvent("TouchEvent"); return true; } catch (e) { return false; } } function touchScroll(id) { if (isTouchDevice()) { //if touch events exist... var el = document.getElementById(id); var scrollStartPos = 0; document.getElementById(id).addEventListener("touchstart", function (event) { scrollStartPos = this.scrollTop + event.touches[0].pageY; event.preventDefault(); }, false); document.getElementById(id).addEventListener("touchmove", function (event) { this.scrollTop = scrollStartPos - event.touches[0].pageY; event.preventDefault(); }, false); } } </script> <body onload="touchScroll('scrollMe')"> <!-- title --> <!-- <div class="title" onselectstart="return false">Alarms</div> --> <div class="scrollholder" id="scrollMe"> </div> </body> 

将该类添加到要滚动的div。

overflow-x:hidden; 隐藏水平滚动条。 当overflow-y:scroll; 允许您垂直滚动。

 <!DOCTYPE html> <html> <head> <style> .scroll { width: 500px; height: 300px; overflow-x: hidden; overflow-y: scroll; } </style> </head> <body> <div class="scroll"><h1> DATA </h1></div> 
  • 危机/滥用网站中恐慌button的最快退出策略?
  • 在PHP的PHPvariables没有其他方式比:<?php echo $ var; ?>
  • 用React JS无限滚动
  • 将内容插入到iFrame中
  • CSS隐藏滚动条,如果不需要的话
  • 修复网站加载时间?
  • 如何在没有document.write的HTML页面中显示JavaScriptvariables
  • 分别了解offsetWidth,clientWidth,scrollWidth和-Height
  • D3条形图示例不在本地工作
  • 使<body>填满整个屏幕?
  • TD宽度,不工作?