如何使用overflow-x：scroll隱藏滾動條？

Question

我希望div在ipad上可滾動，但我不希望在桌面瀏覽器上看到滾動條，這可能嗎？ overflow-x：scroll，但是滾動條不可見？ 保留滾動功能，但移除滾動條。 還是可以使用div覆蓋滾動條？

Answer 1

您將獲得滾動條的寬度：

var scrollwdth = document.getElementById("scrolldiv").clientWidth;

然后，將textarea插入另一個用作框架的div中，並進行如下設置：

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

的HTML是這樣的：

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

而且，非常重要的是，“框架”具有overflow-y:hidden; 因此滾動條不可見。

Answer 2

請在此處檢查提琴手代碼。

使用以下代碼獲取滾動條的寬度（ 此處為 ）

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)];  
};

將寬度設置為內部div，如下所示：

$(document).ready(function() {
  $(".innerDiv").width($(".outerDiv").width() + getScrollBarSize()[0]);
                    });

還有一個鏈接，給出了以jquery和非jquery方式計算滾動條寬度和高度的實現。