Question

我需要一个可滚动的区域，但不应该看到滚动条。我找到了几个解决方案，通过在内部html元素上设置可滚动性，将填充设置为负值，将容器html元素设置为溢出：隐藏，以便滚动条被推到可见区域之外。但是，这在Mac计算机上不起作用，因为在Mac计算机上没有滚动条，因此在Mac上，不是滚动条被负填充值推到可见区域之外，而是正在移动的内容本身向右，这会弄乱所需的布局填充。是否有一个解决方案可以隐藏非Mac计算机上的滚动条但不会弄乱Mac计算机上的填充？

以下是我找到的解决方案示例。如果你在Windows机器上看这个，它会被发现。在Mac上，内容会靠到右边缘。

.hidden-scrollbar {
  background-color:black;
  border:2px solid #666;
  color:white;  
  overflow:hidden;
  text-align:justify;    
}

.hidden-scrollbar .inner {
  height:200px;
  overflow:auto;
  margin:15px -300px 15px 15px;
  padding-right:300px; /* Samakan dengan besar margin negatif */
}

http://jsfiddle.net/tovic/Uz7wc/

Answer 1

您可以使用此$('somediv')我找到on this post。然后根据结果设置边距和填充。

getScrollbarWidth()

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

var hideScrollbarElems = document.querySelectorAll('.hidden-scrollbar .inner');
var scrollbarWidth = getScrollbarWidth();

for (var i = 0, l = hideScrollbarElems.length; i < l; i++) {
  var elemStyle = hideScrollbarElems[i].style;
  
  elemStyle.marginRight = '-' + scrollbarWidth + 'px';
  elemStyle.paddingRight = scrollbarWidth + 'px';
}

body {
  padding:50px;   
}

.hidden-scrollbar {
  background-color:black;
  border:2px solid #666;
  color:white;  
  overflow:hidden;
  text-align:justify;    
}

.hidden-scrollbar .inner {
  height:200px;
  overflow:auto;
  margin:15px 0 15px 15px;
}

如何隐藏滚动条但保持内部div的滚动能力？

1 个答案: