Automattic / Automattic/antiscroll

Rebuild/refresh methods on window resize

Open
#24 6 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.