Вертикальная прокрутка, но удаление полосы прокрутки

Это было задано несколько раз через Интернет; однако я не могу получить решение, которое работает для меня. Мне нужно поддерживать возможность вертикальной прокрутки, но всегда скрывать полосу прокрутки от просмотра в направлении y.Вертикальная прокрутка, но удаление полосы прокрутки

Мне нужно, чтобы мой #content-main div прокручивался независимо от каждого другого div. Это работает так, как есть; однако у меня есть полоса прокрутки, в которой мне нужно избавиться, но я не знаю, как и почему это так сложно сделать.

Мой код устанавливается следующим образом:

<body> 
    <div id="ipad"> 
     <div id="sidebar-main"> 
      <div id="logo-main">Title</div> 
      <div class="sidebar-option"></div> 
      <div class="sidebar-option"></div> 
      <div class="sidebar-option"></div> 
      <div class="sidebar-option"></div> 
      <div class="sidebar-option"></div> 
      <div class="sidebar-option"></div> 
      <div class="sidebar-option"></div> 
      <div class="sidebar-option"></div> 
     </div> 

     <div id="content-main"> 

      <div id="search-main"> 
       <div id="category-search"> 
        <i id="hamburger-icon" class="fa fa-bars"></i> 
        <input type="text" placeholder="auto loans" /> 
        <i id="search-icon" class="fa fa-search"></i> 
       </div> 
      </div> 

      <div id="page-content"> 
       <img id="home-img" src="home-page.png" /> /* temp */ 
      </div> 

     </div> 
    </div> 
</body>

И CSS отношение к тому, что я пытаюсь сделать:

* { 

    font-family: 'Open Sans', sans-serif; 
    margin: 0; 
} 

html, body { 

    margin: 10px; 
    padding: 0; 
    background: #ccc; 
    overflow: hidden; 
} 

#ipad { 

    padding: 0; 
    margin: 0; 
    width: 768px; 
    height: 1024px; 
    background: #fff; 
    overflow: hidden; 
} 

#content-main { 

    width: 600px; 
    height: 100%; 
    float: right; 
    overflow: auto; 
}

Я видел это «решение», но это делает не работает для меня: http://jsfiddle.net/5GCsJ/954/

И я видел это, но они не работают применительно к моим #content-main DIV: http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx

Любая помощь будет принята с благодарностью.

источник

2016-02-24 Jacob Johnson

Главное в jsfiddle вы связаны является 'набивка-right' свойство на container2, которая скрывает полосу прокрутки. Ваша проблема в том, что у вас есть левое меню, которое занимает некоторое пространство. Вам придется обойти свои ширины и добавить 'padding-right' в ваш' # content-main'. – RaphBlanchet

Ключ к этому имеет элемент (внутренний) внутри другого элемента (внешний). Внутренний элемент должен быть больше внешнего элемента по ширине полосы прокрутки. Во внешнем элементе вам необходимо указать высоту (например, 100%). Отключите горизонтальную прокрутку внутреннего элемента с '' overflow-x: hidden; '' и установите ширину прокладки по ширине полосы прокрутки. –

Я дал CSS для двух div отдельно # content-main div для прокрутки независимо от каждого другого div. И должен закрыть DIV #ipad div перед началом # content-main div. вот код того, что вы хотите.

<body> 
<div id="ipad"> 
    <div id="sidebar-main"> 
     <div id="logo-main">Title</div> 
     <div class="sidebar-option"></div> 
     <div class="sidebar-option"></div> 
     <div class="sidebar-option"></div> 
     <div class="sidebar-option"></div> 
     <div class="sidebar-option"></div> 
     <div class="sidebar-option"></div> 
     <div class="sidebar-option"></div> 
     <div class="sidebar-option"></div> 
    </div> 
</div> 
    <div id="content-main"> 
     <div id="search-main"> 
      <div id="category-search"> 
       <i id="hamburger-icon" class="fa fa-bars"></i> 
       <input type="text" placeholder="auto loans" /> 
       <i id="search-icon" class="fa fa-search"></i> 
      </div> 
     </div> 
     <div id="page-content"> 
      <img id="home-img" src="home-page.png" /> /* temp */ 
     </div> 
    </div>

<style> 
*{margin:0;} 
#ipad{ 
height: 300px; 
width: 100%; 
border: 1px solid green; 
overflow: hidden; 
} 
#sidebar-main{ 
width: 100%; 
height: 99%; 
border: 1px solid blue; 
overflow: auto; 
padding-right: 15px; 
} 
#content-main{ 
width: 100%; 
height: 100px; 
border: 1px solid blue; 
overflow: auto; 
padding-right: 15px; 
} 

html, body{ 
height: 99%; 
border: 1px solid red; 
overflow:hidden; 
} 
</style>

источник

2016-02-25 11:16:55 Gopalakrishnan

Вертикальная прокрутка, но удаление полосы прокрутки

ответ

Смежные вопросы