How to Have Scrollbar When Position Is Negative

how can i have scrollbar when position is negative?

It seems like you cannot do that, because the browsers do not provide that feature.

This is my understanding after looking at the WebDriver spec
http://w3c.github.io/webdriver/webdriver-spec.html

In the section titled 'Determining if an element is displayed'

there is a point that says
"The User Agent must not allow negative scrolling"

Negative position:absolute causes horizontal scroll on iPad

As you don't define overflow:hidden to any parent container, the mobile devices expands the viewport to the size of the content. You you could go with this approach and set the overflow value or you can use position: fixed instead absolute on the slide-out-div. Both should do the trick.

Also note the text of the <a>-element with text-indent: -99999px; is "content", but I guess it should be "subscribe".

Image with negative right, makes unwanted horizontal scroll

I created a quick working example below. Essentially you need to set overflow: hidden; to html, body so that when your images overflow the width of their container (which is set to 100%), the container won't expand and have a scrollbar.

$("button").click(function(){  $(".image-right").addClass("show");});

html, body {  width: 100%;  height: 100%;  margin: 0px;  padding: 0px;  overflow: hidden;}
.image-right {  width: 76%;  height: 100%;  position: absolute;  top:50px;  transition: right .4s ease;  right:-100%;}
.show {  right: 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><img class="image-right" src="http://placekitten.com/500/800" alt="Sample Image">
<button type="button">click to show image</button>

Negative Absolute Positioning, Removing Scrollbar

wrap #corner in another div and set it to the dimension occupied by the end point of the animation as well as position absolute. set the overflow on this div to hidden that will keep it from bleeding off the page and triggering the scroll.

overflow (scroll) to work with negative `left` and `top` positioned elements

The only way I can think of is to wrap the squares in a div the same height as them and use JQuery's scrollTop() method: http://www.w3schools.com/jquery/css_scrolltop.asp but this will also force a horizontal scrollbar beneath the wrapper div... short answer: no CSS-only solution, and positioning them absolutely obviates the scroll for this solution - try floating left and clearing each row if you want to use this method.

Negative margin and scrollbars

This should achieve the desired effect. Notice that the inner div does not have position absolute.

<div style="position: absolute; left:50%">
  <div style="width: 1000px; margin-left: -500px;">

  </div>
</div>

There may be a better way to do what you are trying to do though.

---

Related Topics