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

Question

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

Answer 1

請檢查提琴手代碼here。

使用下面的代碼來獲得滾動條的寬度（從here refferred）

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方式計算滾動條寬度和高度的實現。

Answer 2

你得到滾動條的寬度：

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

然後你插入文本區域到另一個DIV充當框架並設置它像這樣：

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

的HTML像這樣的：

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

而且，非常重要的， 「幀」 具有overflow-y:hidden;，使滾動條不可見。