Lock vertical scroll

17,209

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>

Share:
17,209
André Mata
Author by

André Mata

Updated on June 04, 2022

Comments

  • André Mata
    André Mata almost 2 years

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