ember build is failing in my project when I have upgraded to [email protected]:

ember build -w t
DEPRECATION: Overriding init without calling this._super is deprecated. Please call `this._super.init && this._super.init.apply(this, arguments);` addon: `ember-get-helper`
    at Function.Addon.lookup (fakepath/node_modules/ember-cli/lib/models/addon.js:996:27)
⠋ BuildingInvalid Version: undefined
TypeError: Invalid Version: undefined
    at new SemVer (fakepath/node_modules/ember-scrollable/node_modules/semver/semver.js:281:11)
    at compare (fakepath/node_modules/ember-scrollable/node_modules/semver/semver.js:571:10)
    at Function.lt (fakepath/node_modules/ember-scrollable/node_modules/semver/semver.js:605:10)
    at DependencyVersionChecker.(anonymous function) [as lt] (fakepath/node_modules/ember-scrollable/node_modules/ember-cli-version-checker/index.js:68:26)
    at Class.treeFor (fakepath/node_modules/ember-scrollable/index.js:27:31)
    at Class.superWrapper [as treeFor] (fakepath/node_modules/ember-cli/node_modules/core-object/lib/assign-properties.js:32:18)
    at fakepath/node_modules/ember-cli/lib/models/addon.js:245:34
    at Array.map (native)
    at Class.eachAddonInvoke (fakepath/node_modules/ember-cli/lib/models/addon.js:243:24)
    at Class.treeFor (fakepath/node_modules/ember-cli/lib/models/addon.js:329:22)

I'll try to isolate this to make sure it is that package

I'm using your module through ember-light-table, and I'm getting this error when testing through phantomjs: "TypeError: undefined is not a function (evaluating 'Number.parseInt(offset, 10)')", at the function call here.

I'm not sure what would cause Number.parseInt() to be undefined.

In case of calling the update() or recalculate() action the scrollbar is not only resized it is always moved to the top. This happens on resizing the page as well.

Could you guys please release a new version that includes f383d09?

Hello

the bug is due to this line of code

offset = Number.parseInt(offset, 10)

on IE11 Number.parseInt is undefined

object doesn't support property or method 'parseInt'

When I have an scrolledToBottom action that re-renders the scrollable content with more elements, the scrollTop is always set such that the scrollbar is at the bottom of the newly expanded scrollable content area, and it will cause scrolledToBottom to be triggered again and so forth.

How do I preserve the scrollTop when the scrollable content area resizes?

Discovered by adopted-ember-addons/ember-light-table#592 downstream

Contributions welcome

Use case: scroll bar that scrolls content not visually adjacent to the scrollbar, and you don't want the content to have its own scrollbar, so you'd implement it with two ember scrollable sections one with the scrollbar hidden.

Just a note to myself.

Hello -

Based on the conversation in #98, what would @alexander-alvarez or anyone else at alphasights thing about transfering this addon to: https://github.com/adopted-ember-addons

That way it can transfer ownership, maintenance, in a secure and transparent way with:

1. a relatively trusted group to steward security updates
2. More eyes to be able to triage issues, etc
3. Gets this off your hands but maintains stability for consumers

Here are the program guidelines: https://github.com/adopted-ember-addons/program-guidelines/blob/master/README.md

There is a bug when there are vertical and horizontal scrollers on the screen like you have in your "Double Scroll" demo (https://alphasights.github.io/ember-scrollable/).

To reproduce in your demo:
Move vertical scroll to the middle and then move horizontal scroll but with the mouse click and then drag left or right (actually, dragging left or light is not necessary, just the click on horizontal scroll is enough). After the click the content will move to the top while vertical scroll will stay in the middle.

Actually, if you try randomly clicking on scrollers, it just seems there are some weird issues that pop up.

Originally reported in adopted-ember-addons/ember-light-table#363.

Merely moving the mouse over an instance of {{ember-scrollable}} is enough to constantly trigger didRender.

<div style="height: 50vh; width: 80%;">
  {{#ember-scrollable}}
    <div style="height: 300vh; background: linear-gradient(0deg, #009245, #FCEE21);">
    </div>
  {{/ember-scrollable}}
</div>

Tested in Internet Explorer 11 with Edge rendering engine on Windows 7. Also happens with the IE 10 and IE 9 rendering engine.

Currently, the scrollbar is recalculated when the window is resized which works great but I believe that it should also be recalculated when the height/width of the viewport has changed.

Let me give you an example:

In my app I have a filter toggle which when clicked, expands out a div with some options. When that button is clicked again, it hides the previously opened div. On both click events, the viewport height has changed and the scrollbars have not updated, leaving an awkward empty whitespace.

When I resize the screen, the scrollbar gets recalculated and all is fixed.

~ DELETED ~

Running tests in IE is a complete PITA as some cases, besides failing, seem to take forever and freeze the whole browser.

Hello

I am using jquery ui draggable inside scrollable component and it prevents my draggable elements from dragging. I have search and found the issue inside your add-on:

  /**
  * Drag scrollbar handle
  */
  drag(e) {
    return;
    e.preventDefault();

    this.get('scrollbar').drag(e);
  },

this code is preventing it from working and I guess it should not be global for entire ember-scrollable component, and you can move this to be prevented only on the handle.

Thanks
Ashot Vardanyan

Hi,

Right now this addon needs Ember's jQuery integration to be enabled as it uses this.$() in several places, as well as some jQuery functions.

This could be refactored to avoid mandating a dependency on jQuery, though in the meantime adding the @ember/jquery package as an explicit dependency might be a good first step.

Thoughts?

It seems like IE11 doesn't have some methods like parseInt defined.

How much work would it be to get this running in IE11, too? Is it just some fixing here and there or do you rely on newer browsers in depth?

Please check https://alphasights.github.io/ember-scrollable/ , there is described issue:

When the content is changed, the scroll bar size is not calculated.The previous content scroll bar size is maintained.

The scrolling does not feel like the native scrolling but rather sluggish if you open it in Safari on iOS. Reproduction: your demo page.

Hi! I just installed ember-scrollable using npm i [email protected] --save and included my code into:
{{#ember-scrollable onScrolledToBottom=(action 'log' 'Bottom reached!')}}
...TABLE CONTENT
{{/ember-scrollable}}

and got problem:
ember.debug.js:2532 Uncaught TypeError: Cannot read property 'setAttribute' of undefined
at DOMHelper.prototype.setAttribute (ember.debug.js:2532)

Can you please explain me, what the problem is?

In ember-scrollable.js you're registering three two event listeners on document.body and one on window. As far as I can see these event listeners aren't removed when the element is destroyed.

I am stuck trying to add an action that triggers the scrollable content to scroll a specific direction, for a length.

actions: {
    next() {
      this.setProperties({
        scrollToX: 100,
      });
    }
}

    {{#ember-scrollable horizontal=true scrollTo=top}}
            <div class="item">
              <span>{{item}}</span>
            </div> 
    {{/ember-scrollable}}
    <div class="swiper-next" onclick={{action "next"}}>
      Next
    </div>

I have tried to change the property value, and that does not work. Is there something I need to do?

There is a problem with situation when dragging scrollbar and leaving the application area while still keeping mouse button pressed. After reentering into another portion of application viewport, the mousemove events are still consumed by scrollbar. Following code inserted into
"ember-scrollable\addon\components\ember-scrollable.js" helped to me:
..
mouseLeave(e){
if(e.buttons) {
this.endDrag(e);
}
}
..

Use a test helper like https://github.com/html-next/vertical-collection/blob/master/tests/helpers/wait.js or native dom helpers to make scroll tests less hacky.

Hi there,
is it obligatory to have a ember-element-resize-detector as a dependency? And it could be very useful if it can save the position of scroll when the wrapping div is resizing.

Can you please add @Baltazore as a contributor to this library? Also, can you please upgrade me to admin on this repo?

Or alternatively, can I move this repo to my organization?

@Arkham to hookup this repo to TravisCI, TravisCI requires admin permissions on the organization. I don't have that, so could you please activate this repo on TravisCI?

I am not able to get the width property on the scrollable area.

I have made paging controls, to allow user interactions for scrolling, and I need to get the max width of the area, so I stop the scrolling action. Any suggestions?

ember-element-resize-detector shipped a fix for this deprecation warning in 0.3.0. Can we bump the dependency version to stop the deprecation warning in our apps?

for tracking related to adopted-ember-addons/ember-light-table#323
cc @offirgolan

I spooled up a new ember project and everytime I copy your code from Demo. It never works. Any ideas? I'm trying to figure out the horizontal scroll only. Thanks in advance.

CODE:
{{#ember-scrollable horizontal=true}}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

DEPRECATION: ember-cli-babel 5.x has been deprecated. Please upgrade to at least ember-cli-babel 6.6. Version 5.2.8 located: site-xxx-> ember-light-table -> ember-scrollable -> ember-component-inbound-actions -> ember-cli-babel

Anyone else seeing this on the regular in chrome?

Would you be open to a PR replacing Sass with PostCSS?

Downloading the binary tends to cause problems behind our corporate proxy.

It seems like the width for the tse-scrollable-content div is incorrectly set in the following env:

OSX version: 10.12 (16A323)
FireFox: 48 and 50.1.0
URL: http://offirgolan.github.io/ember-light-table/#/grouped

Chrome 55

Firefox 50.1.0

As you can see, this is screwing up the table's alignment.

cc @taras

I occasionally see this exception in my integration tests:

Error: Uncaught TypeError: Cannot read property 'width' of undefined (http://localhost:7357/assets/vendor.js:169159)
    at global.onerror (http://localhost:7357/assets/test-support.js:8333:10)

and I tracked it down to the Scrollbar create method.

Looks like there might be a "bail if destroyed" bit missing.

For example when using ajax to get some text.

component.js:

$.get({
	url: 'http://server.com/get-text',
	dataType: 'text'
}).then(data => {
	this.set('text', data)
});

component.hbs:

{{#ember-scrollable horizontal=true vertical=true}}{{text}}{{/ember-scrollable}}

It is necessary to wrap ember-scrollable into {{#if text}}{{/if}}.

Over in adopted-ember-addons/ember-light-table#148 we need a way to listen for scroll events and also manually scroll to a specific position (#15).

I'll work on a solution.

Release 0.0.3 introduces the new ES6 Number feature which breaks PhantomJS. I think it is a good idea to keep the globals parseInt and isNaN until Number is oficially supported.

All instances of {{ember-scrollable}} appear to share state.

If I hover over one container, not only the scrollbar of this container fades in, but all other containers do the same. Also, when using scrollTo, all containers scroll to that position.

I'm having some difficulty resetting the the scroll position to the top? I am dynamically updating the contents of the scrollable and would like to also manually reset its scroll position to the top.