[英]How to hide scrollbar with using overflow-x:scroll?
I want the div
to be scrollable on ipad but I don't want the scrollbar to be seen on the desktop browsers, is it possible? 我希望
div
在ipad上可滚动,但我不希望在桌面浏览器上看到滚动条,这可能吗? overflow-x:scroll, but the scrollbar is invisible? overflow-x:scroll,但是滚动条不可见? Remain the scrolling function but remove the scrollbar.
保留滚动功能,但移除滚动条。 Or is it possible to use a
div
to cover the scrollbar? 还是可以使用
div
覆盖滚动条?
You get the width of the scrollbar: 您将获得滚动条的宽度:
var scrollwdth = document.getElementById("scrolldiv").clientWidth;
Then you insert the textarea into another div which acts as a frame and you set it like this: 然后,将textarea插入另一个用作框架的div中,并进行如下设置:
document.getElementById("frame").style.width = scrollwdth + "px";
the html is like this: 的HTML是这样的:
<div id="frame">
<div id="scrolldiv"></div>
</div>
And, very important, "frame" has overflow-y:hidden;
而且,非常重要的是,“框架”具有
overflow-y:hidden;
so that the scrollbar is not visible. 因此滚动条不可见。
Please check the fiddler code here . 请在此处检查提琴手代码。
Use the below code to get the scrollbar width (refferred from here ) 使用以下代码获取滚动条的宽度( 此处为 )
function getScrollBarSize () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "100%";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.height = "100px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
var h1 = inner.offsetHeight;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
var h2 = inner.offsetHeight;
if (w1 == w2) w2 = outer.clientWidth;
if (h1 == h2) h2 = outer.clientHeight;
document.body.removeChild (outer);
return [(w1 - w2),(h1 - h2)];
};
Set the width to the inner div as below: 将宽度设置为内部div,如下所示:
$(document).ready(function() {
$(".innerDiv").width($(".outerDiv").width() + getScrollBarSize()[0]);
});
There is one more link which gives the implementation of calculating the scrollbar width and height in jquery and non-jquery way. 还有一个链接,给出了以jquery和非jquery方式计算滚动条宽度和高度的实现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.