CODEWITHSUNDEEP
htmlcssscrollposition
André Mata
André Mata

Reputation: 383

Lock vertical scroll

I have an image that I need it to scroll horizontally (due to responsive menu that moves content to the left ) and fixed vertically (the logo is always fixed vertically).

I want to lock vertical scroll, but let scroll horizontal work.

I want something like this,

vertical.position:fixed
horizontal.position:relative

But if it isn't possible, I would like to know if it's possible o make a reach box for the logo.
I've already tried overflows and positions...
Thank you

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

Upvotes: 2

Views: 23835

Answers (1)

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3788

You can disable vertical scroll by using 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>

Upvotes: 4

Related Questions