隱藏動態區域中的滾動條

我想隱藏CSS中動態大小的元素中的滾動條，並允許內容佔據滾動條所在的空間。我設法通過在我的元素的右邊添加一些額外的填充來將其隱藏，這會將其從overflow: hidden div推出，但內容不會擴展以填充滾動條佔用的空間。隱藏動態區域中的滾動條

我不想爲滾動條寬度使用任何靜態值，因爲瀏覽器和某些瀏覽器（如Chrome）之間的變化會在縮放時更改滾動條寬度。

JSFiddle example，取消註釋以隱藏滾動條。

在滾動條：

沒有滾動條：

來源

2016-02-27 user2248702

所以你根本不需要一個滾動條？ –

@SamirChahine不，我希望能夠用鼠標/ javascript滾動，但我不想看到一個可見的欄。 – user2248702

如果你想有一個滾動的股利，但沒有滾動條

，將它放在一個父DIV中。設置父div的溢出隱藏和內部的div溢出自動。讓父div比內部div稍微瘦一些，這樣內部div的滾動條就不會顯示出來。如果用dynaymically創建，只需在使用jQuery或其他js進行渲染時設置寬度即可。

.parentDiv 
    { 
     width: 301px; 
     height: 450px; 
     overflow: hidden; 
    } 

.parentDiv .innerDiv 
    { 
     width: 320px; 
     height: 450px; 
     overflow: auto; 
    }

ps： - 我只是把它放在一起來顯示效果。請注意，它爲CSS設置了div的寬度。這樣的效果不需要JS或JQuery，但是會動態設置樣式規則。或者使用php並在頁面加載/渲染時加載寬度。你可以爲css投資「calc」，但我不知道在不同的瀏覽器中支持多好。或者 - 對css使用percenttentages，只需使父div的skinner比nner div。

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<title>Scrollable Div Test</title> 
<meta charset="UTF-8" /> 
    <style> 
    .parentDiv 
    {; 
     width: 301px; 
     height: 450px; 
     overflow: hidden; 
    } 

.parentDiv .innerDiv 
    { 
     width: 320px; 
     height: 450px; 
     overflow: auto; 
    } 

    </style> 
</head> 

<body> 

<div class="parentDiv"/> 
    <div class="innerDiv"/> 
     <ul> 
      <li>a</li> 
      <li>b</li> 
      <li>c</li> 
      <li>d</li> 
      <li>e</li> 
      <li>f</li> 
      <li>g</li> 
      <li>h</li> 
      <li>i</li> 
      <li>j</li> 
      <li>k</li> 
      <li>l</li> 
      <li>m</li> 
      <li>n</li> 
      <li>o</li> 
      <li>p</li> 
      <li>q</li> 
      <li>r</li> 
      <li>s</li> 
      <li>t</li> 
      <li>u</li> 
      <li>v</li> 
      <li>w</li> 
      <li>x</li> 
      <li>y</li> 
      <li>z</li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

來源

2016-02-27 01:14:45 gavgrif

我刪除了我的答案，這是正確的，+1 –

如果可能，我寧願不使用js。 – user2248702

我不介意使用calc，因爲我針對的是現代瀏覽器並在其他地方使用它。 – user2248702

設置溢出：隱藏;在#scroll但只有當你不希望在任何滾動

#scroll { 
    width: 100%; 
    height: 100%; 
    overflow-y: hidden; /*this is the part of the code which make the scroll bar visable*/ 
    background-color: aqua; 
    /*padding-right: 32px; /* uncomment to remove scrollbar by pushing 32 px right*/ 
}

如果有辦法做到這一點沒有JS我不知道，但這裏是我的想法至今
使用JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script> 
<script type="text/javascript"> 
$(function() { 

    $("#scroll").mousewheel(function(event, delta) { 

     this.scrollLeft -= (delta * 30); 

     event.preventDefault(); 

    }); 

}); 
</script>

注意，您需要jQuery和jQuery的一個插件叫做（jQuery的鼠標滾輪）https://github.com/jquery/jquery-mousewheel
或者你可以試試這個一出來，它的另一個JS但是這一個是純JS https://github.com/kamlekar/slim-scroll

來源

2016-02-27 02:17:18 hamada147

隱藏動態區域中的滾動條

回答

相關問題