Automattic / Automattic/antiscroll
Rebuild/refresh methods on window resize
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 156
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
My container is 100% height. I am handling the window resize to update the scroller. All three potential methods I've tried have issues.
Here is a gist that demonstrates the issue.
https://gist.github.com/2522897
The methods I've tried to get this to work
- **reapply the plugin_** - This works but the scroller range is not updated.
- **rebuild** - Updates the size of the inner div but removes the scroll bars
- **refresh** - Updates the scroller but doesn't change the size of the inner div.
I'm not sure why the plugin has both a rebuild and a refresh method? From reading the previous issues it seems rebuild was meant to solve the issue of flexible containers. I have an alternative fix which doesn't require the rebuild method.
``` javascript
function Antiscroll (el, opts) {
this.el = $(el);
this.options = opts || {};
this.x = false !== this.options.x;
this.y = false !== this.options.y;
this.padding = undefined == this.options.padding ? 2 : this.options.padding;
this.inner = this.el.find('.antiscroll-inner');
this.refresh();
};
Antiscroll.prototype.refresh = function() {
var width = this.el.width(),
height = this.el.height(),
needHScroll, needVScroll;
this.inner.css({
'width': (width + scrollbarSize()) + 'px'
, 'height': (height + scrollbarSize()) + 'px'
});
needHScroll = this.inner.get(0).scrollWidth > width;
needVScroll = this.inner.get(0).scrollHeight > height;
if (!this.horizontal && needHScroll && this.x) {
this.horizontal = new Scrollbar.Horizontal(this);
} else if (this.horizontal && !needHScroll) {
this.horizontal.destroy();
this.horizontal = null
}
if (!this.vertical && needVScroll && this.y) {
this.vertical = new Scrollbar.Vertical(this);
} else if (this.vertical && !needVScroll) {
this.vertical.destroy();
this.vertical = null
}
};
```
I simply update the inner size in the refresh method. This step can then be removed from the constructor. Works great for me. Maybe I am missing the reason for the rebuild method.
Thanks
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the linked gist and inspect the plugin's rebuild and refresh methods, then compare them with the resize sequence described in the issue. Check how the constructor sizes .antiscroll-inner and how scrollbar instances are created or destroyed. Done means resizing a flexible container updates both the inner dimensions and scrollbars without removing them.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100