html - 锁定垂直滚动

Question

我有一个图像，我需要它水平滚动(由于响应式菜单将内容移动到左侧) 并垂直固定( Logo 始终垂直固定)。

我想锁定垂直滚动，但让水平滚动起作用。

我想要这样的东西

vertical.position:fixed
horizontal.position:relative

但如果不可能，我想知道是否可以为 Logo 制作一个触及框。
我已经尝试过溢出和位置...
谢谢

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;
 }

Answer 1

您可以使用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>