鎖定垂直滾動

我有一張圖像，我需要它水平滾動（由於響應菜單向左移動內容）並垂直固定（徽標始終垂直固定）。
鎖定垂直滾動

我想鎖定垂直滾動，但讓滾動水平工作。

我想是這樣的，

vertical.position:fixed 
horizontal.position:relative

但如果這是不可能的，我想知道是否有可能使Ø爲徽標範圍框。
我已經嘗試過的溢出和立場...
謝謝

HTML

<div class="site-wrap"> 
    <div id="bar"> 
     <div id="baar"> 
      <img src="images/logo2.png" alt="logo2" width="124" height="56" /> 
     </div> 
    </div> 
</div>

CSS

#bar { 
    height: 88px; 
    width: 100%; 
    position: relative; 
    top: 0; 
    left: auto; 
    z-index:2; 
    float: right; 
} 
#baar { 
    height: 56px; 
    width: 100%; 
    background: linear-gradient(top, #e3e3e3 0%, #f9f9f9 100%); 
    background: -moz-linear-gradient(top, #e3e3e3 0%, #f9f9f9 100%); 
    background: -webkit-linear-gradient(top, #e3e3e3 0%, #f9f9f9 100%); 
    background-image: -ms-linear-gradient(top left, #e3e3e3 0%, #f9f9f9 100%); 
    background-image: -o-linear-gradient(top left, #e3e3e3 0%, #f9f9f9 100%); 
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f9f9f9), color-stop(1, #e3e3e3)); 
    background-image: linear-gradient(to bottom right, #e3e3e3 0%, #f9f9f9 100%); 
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
    position: relative; 
    overflow-y: inherit; 
    left: auto; 
    text-align: center; 
    margin-top: 16px; 
    top:0; 
} 
.site-wrap { 
    min-width: 100%; 
    min-height: 100%; 
    background-image: url(images/pat3.png), url(images/pat.gif); 
    background-size: 100% 100%, auto; 
    position: relative; 
    top: -18; 
    bottom: 100%; 
    left: 0; 
    z-index: 1; 
}

來源

2015-07-10 André Mata

你能給我們一個jsfiddle鏈接的代碼嗎？ –

請在您的問題中添加代碼 – Harsh

這是很多代碼...但我會添加容器和酒吧分區...等待第二個 –

您可以通過使用overflow-y:hidden;

div { 
 
    width: 200px; 
 
    height: 150px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
    border: 1px solid #000 
 
}

<div> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div>

禁用垂直滾動

來源

2015-07-10 08:58:20

它不起作用... –

運行上面的代碼片段。而不是文字，你可以添加圖像 –

我明白你說什麼，我會嘗試用我的代碼，我會在一分鐘之內讓你知道...謝謝 –

鎖定垂直滾動

回答

相關問題