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;

停用垂直滚动

＆＃13;

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

＆＃13;

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

＆＃13;

锁定垂直滚动

1 个答案: