Closed raulmatei closed 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.
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.
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.
Hi Raul
I am having the same issue, could you provide an example with the complete fix?
Thanks a lot
Urs
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.
Thanks a lot! I'll try to adapt it and post my version
You welcome, hope it helps.
Thank you @raulmatei, your fix worked perfectly for me as well.
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](https://f.cloud.github.com/assets/1718341/108033/07a0885a-6a40-11e2-8933-69038a09206e.jpg)
HTML behind is:
The CSS:
The JS: