search

Automattic / antiscroll

OS X Lion style cross-browser native scrolling on the web that gets out of the way.
1.07k stars 162 forks source link

Not working with 100% width/height elements #44

Closed raulmatei closed 11 years ago

raulmatei commented 11 years ago

I was trying to set it up with 100% width & height elements but it's not working, so I tried to dynamically set the width and height through javascript, it works this way but the div native scrollbars still appear, see image attached antiscroll

HTML behind is:

  <body>
    <div class="box-wrap antiscroll-wrap">
      <div class="box">
        <div class="antiscroll-inner">
          <div class="box-inner">
            ...
          </div>
        </div>
      </div>
    </div>
 </body>

The CSS:

body {
        padding: 0;
        margin: 0;
        overflow: hidden;
      }

The JS:

        $(window).on('load resize', function() {
          $('.antiscroll-inner').css({
            height: $(window).height(),
            width: $(window).width(),
          });
        }).resize();
jrolfs commented 11 years ago

I did some work to get things working with absolute constraints (so you could do top: 0, right: 0, bottom: 0, left: 0). You can check out my fork/branch here: https://github.com/jrolfs/antiscroll/tree/jamie. I would try and give you more in depth help but I've been super busy lately.

raulmatei commented 11 years ago

Hey, Thanks for your input, I'll take a look on it. I've solved the issue partially by: HTML:

<body>
  <div class="antiscroll-wrap">
    <div class="box">
      <div class="antiscroll-inner">
        ...
      </div>
    </div>
  </div>

CSS:

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
body {
  overflow: hidden;
}

.antiscroll-inner {
  width: 100%;
  height: 100%;
}

JS:

$(window).on('load resize', function() {
  $('.box').css({
    height: $(window).height(),
    width: $(window).width(),
  });
}).resize();

The remaining problem is that .antiscroll-inner is not getting 100% width/height after a window resize.

raulmatei commented 11 years ago

Thanks again for your input, just solved the issue for my particular case. I've added:

    this.inner.css({
        'width': this.el.width() + scrollbarSize()
      , 'height': this.el.height() + scrollbarSize()
    });

... into refresh method, so there's no need to add the css 100% width/height.

It works for the moment, I'll try to find a better solution in the near future.

ursbraem commented 11 years ago

Hi Raul

I am having the same issue, could you provide an example with the complete fix?

Thanks a lot

Urs

raulmatei commented 11 years ago

Hi, you can find an example of what I did here http://raulmatei.com/s/, I've added a scroll track for my project no need for you to copy that part.

ursbraem commented 11 years ago

Thanks a lot! I'll try to adapt it and post my version

raulmatei commented 11 years ago

You welcome, hope it helps.

Lazza commented 9 years ago

Thank you @raulmatei, your fix worked perfectly for me as well.