锁定垂直滚动

Question

我有一个图像，我需要它水平滚动（由于响应菜单向左移动内容）和垂直固定（徽标始终垂直固定）。

我想锁定垂直滚动，但滚动水平工作。

我想要这样的东西，

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

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>