How to hide scrollbar with using overflow-x:scroll?

Question

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? overflow-x:scroll, but the scrollbar is invisible? Remain the scrolling function but remove the scrollbar. Or is it possible to use a div to cover the scrollbar?

Answer 1

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:

document.getElementById("frame").style.width = scrollwdth + "px";

the html is like this:

<div id="frame">
<div id="scrolldiv"></div>
</div>

And, very important, "frame" has overflow-y:hidden; so that the scrollbar is not visible.

Answer 2

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:

$(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.