ragnarpeterson/ember-scroll-to

Animated scrolling to a specified id.

ember-scroll-to's Issues

Add tests

As it stands, this package has no tests. It will be an exercise in mocking jQuery, but I think it's doable.

I will try to help if I have time.

Upgrading this and maintaining

I would like to upgrade this addon and like to maintain myself. Are you ok with that or should I fork and do all the upgrades and raise against this repo?

Offset is not working

It looks like this is not in the 0.3 release, because if I use the latest commit of the repo it does work. The 0.3 code does not contain any references to offsets.

See current release vs. newest commit.

Probably the solution is to simply create a new release of the latest commit.

plan to release new version?

We need ember-scroll-to v0.6.5 to fix some of our deprecated warnings related to ember-cli-babel 5.x
Do you have any ETA to release v0.6.5?

scroll-to not working on second load of a route in the same session

Hi, thanks for scroll-to!

We are experiencing an issue where scroll-to works like a charm, but when we navigate away to another route, and come back to the original route, it doesn't work. (clicking the scroll-to links does nothing, no errors in console)

Any ideas?

Publish 0.5.2

cc @jasonkriss

scroll-to does not work with a custom scrollable which is at the top of the document

The fundamental problem is the addon recommends setting the scrollable property on the service. This leaves the service to perform an inaccurate check to see if the user overwrote the scrollable propery (https://github.com/c4eo/ember-scroll-to/blob/master/addon/services/scroller.js#L39). Clearly this check doesn't work if top is 0.

I'll submit a PR shortly which adds an acceptance test and fixes the bug. I won't change the recommendation to set scrollable as that would be a breaking change.

Documentation

It'd be nice to have documentation on the available options (duration, easing, offset), etc.

scroll-to is not working if pointing backward

I tried the following code:
{{scroll-to href='#contacts' label='contacts1'}}
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

contacts

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>{{scroll-to href='#contacts' label='contacts2'}}

if I press "contacts1", the page scrolls correctly forward to the contacts id, if I press "contacts2" the page does not scroll backward to the corresponding id but it scrolls forward by some fixed amount.

Allow specifying which element to set scroll position on

Hi there!

Your promising add-on caught my eye, for I was aspiring to create a fancy scroll transition in an app building on Ember Material Lite. To my grave disappointment I found out it didn't work. Digging into it I quickly found out the cause:

I saw here that it uses html, body as the selector for the element to set the scroll position off. This is quite common practice, and will work for many websites as a sane default :) There are however quite some frameworks, like Google's popular Material Design Lite, that prefer setting up a specific DOM structure for handling things like responsiveness, containing the main layout etc. You'll probably feel where this is going :) For these frameworks, this nifty add-on could also easily work, giving there were is a way for the user to override the default selector of the main view element. For example, in the case of Material Design Lite it would be main.mdl-layout__content.

Would you consider facilitating this? If you're rather occupied I could propose a pull request.

Greetings!

BeforeScroll

I'd like to scroll to a tab that doesn't exist in the dom yet. Can we add a BeforeScroll hook?

{{scroll-to}} is creating a <div> and isn't working

It's creating a

instead of an like the documentation says.

I added tagName="a" and still doesn't scroll to the selector.

Any tips?

Bug with scrolling when scrollable area is not the same size as the document

I've opened https://github.com/jasonkriss/ember-scroll-to/pull/25 which addresses a bug that can occur when you overwrite the scrollable element with an element that is not the same since as the document, this change fixes that specific instance without changing the behavior otherwise.

Allow persisting scroll-to anchor as query param

It would be nice to persist the scroll-to as a query param to allow sharing a link with an anchored element.

Here's one way it could be done:

• Create a ScrollToMixin that you mix into the controller of the route you want to allow persisting a scroll-to link
• That mixin handles detecting the presence of that query param and does the scrolling action when that param is added or changed.

We have a home-grown solution we're using on our project ( like this https://ibotta.com/how?st=%23how-receipt ) that we could bring to this project if there's interest.

afterScoll action is triggered twice

I have a component that has the scroll-to helper embedded inside it and needs to bubble an action up to its parent component. It's an implementation for an accordion-style dropdown box, and the afterScroll action is to open the next accordion.
When the scroll-to is clicked, the afterScroll action is correctly triggered and bubbles up to the parent correctly, but it happens twice, resulting in the next-next accordion being opened.

Code for the Accordion Component:

        doNextAccordian: function(){
	  console.log("I'm the component");
	  this.get('aNeatFunction')();
  }
}

Accordion Component HBS:

	<h3 {{action "open"}} id="next" class="accordian-header accordian-{{color}}"><div>{{title}}</div><span  class="accordian-expand {{if accordianOpen "accordian-open"}}">&#9660;</span></h3>
	<div class="accordian-content {{if accordianOpen "accordian-open"}}">
		<div class="row">
			<div class="col col-12">
        {{yield}}
			</div>

			<div class="row">
				<div class="col col-7"></div>
				<div class="col col-4">
					{{scroll-to
						href='#next'
						label="next"
						duration=1000
						class="btn grey-btn"
						afterScroll=(action "doNextAccordian")}}
				</div>
			</div>
		</div>
	</div>
</div>

Console Output:

      I'm the component
      I'm the component

The only thing I could think of is that every accordian has the target ID, but I tested it with just a single instance of the ID, and the function is still triggered twice.

Calling scrollTo from JS

Sometimes scrolling needs to happen as a result of some programmatic event/promise, not just from immediate user action.

Would be awesome to have something like this.scrollTo() in addition to {{scroll-to}}.

Up for adoption?

When an original owner no longer has time to maintain the addon, there is a place where the addon can be "put up for adoption." Melanie Sumner has created adopted-ember-addons.

Would you consider allowing us to adopt ember-scroll-to so that the addon may continue to provide useful service to the community?

scrollTop not working on Android Mobile

I am implementing ember-scroll-to on our project and found a weird behavior with the scroll animation on some Android phones. The screen should scroll to the first input of a long form, but instead, it would scroll to the footer of the screen.

Upon investigation, I found about this known issue with JQuery's__ scrollTop() running on Android browsers. It breaks when the CSS property overflow is set to scroll.

At Stack Overflow I found a good workaround for this. You basically set the overflow property to hidden before calling scrollTop() and then set it back to scroll after calling it (so the page goes back to the expected behavior).

I used it on my project and it worked just fine. I didn't notice any side effects too. It would be great to have this workaround built in the addon.

I copy below the code I'm using:

JS

  _scrollToFirstError() {
    const selectorFirstInputError = '[data-error=\"true\"]:first';

    $('html, body').addClass('androidFix'); // FIRST PART OF WORKAROUND

    if ($(selectorFirstInputError).length) {
      this.get('scroller').scrollVertical(selectorFirstInputError, { offset: -15 });

      if (!isMobile) {
        $(`${selectorFirstInputError} input`).focus();
      }
    }

    $('html, body').removeClass('androidFix'); // SECOND PART OF WORKAROUND
  },

CSS

.androidFix {
    overflow:hidden !important;
    overflow-y:hidden !important;
    overflow-x:hidden !important;
}

Pass parameters to after scroll

How can i pass parameters to afterScroll, like the link that's been clicked

Publish to npm?

Is the latest version going to be published to npm soon? Thanks!

Remove deprecations, update to newer ember and ember-cli.

Because of a depreacation it's impossible to use it in ember 2.0. Because of that I removed a deprecation and during that updated to ember 1.13.1.

Scroll to top not working in FireFox

I’m using the addon to have a simple scroll-to-top on my site. It works great in Chrome and Opera,
but nothing happens in FireFox (Windows, FF 51.0.1).

Pull Request #25 breaks ember-scroll-to on Chrome 61

Ember-scroll-to no longer works in chrome.
The code added in PR #25 tries to normalize the targets offset top by the scrollable containers top (if the page is scrolled) and the scrollable containers current scroll position. This is necessary because the target's top is calculated from the top of the document, not its scrolling parent.

Anyhow, we want to normalize the targets offset top only when necessary.

Steps to reproduce,

• clone the repo
• start up the dummy app in the latest version of chrome
• paste this code into the application.hbs, observe that it does not do what you expect.

<div style='position: fixed; top: 40px; right: 40px; color: black; background-color: lightGrey; padding: 5px;'>
  <h3 style='color: black;'>Scroll Nav Menu</h3>
  <div>
    {{#scroll-to href='body'}}
    Position TOP OF BODY
    {{/scroll-to}}
  </div>

  <div>
    {{#scroll-to href='#position-1'}}
    Position 1
    {{/scroll-to}}
  </div>

  <div>
    {{#scroll-to href='#position-2'}}
    Position 2
    {{/scroll-to}}
  </div>

  <div>
    {{#scroll-to href='#position-3'}}
    Position 3
    {{/scroll-to}}
  </div>
</div>

<div class='spacer' style='height: 400px;'>Spacer</div>
<div class='spacer' style='height: 400px;'>Spacer</div>
<div class='spacer' style='height: 400px;'>Spacer</div>

<div id='position-1' style='height: 400px; background-color: lime;'>
  Position 1 scroll destination
</div>

<div class='spacer' style='height: 400px;'>Spacer</div>
<div class='spacer' style='height: 400px;'>Spacer</div>
<div class='spacer' style='height: 400px;'>Spacer</div>

<div id='position-2' style='height: 400px; background-color: lime;'>
  Position 2 scroll destination
</div>

<div class='spacer' style='height: 400px;'>Spacer</div>
<div class='spacer' style='height: 400px;'>Spacer</div>
<div class='spacer' style='height: 400px;'>Spacer</div>

<div id='position-3' style='height: 400px; background-color: lime;'>
  Position 3 scroll destination
</div>

<div class='spacer' style='height: 400px;'>Spacer</div>
<div class='spacer' style='height: 400px;'>Spacer</div>
<div class='spacer' style='height: 400px;'>Spacer</div>

Action after scroll-to

Hi,

I think it's a good idea to make possible to add some callback after scroll-to by Ember.Component.sendAction. I've made a pull request (#6) for that, take a look.

Regards