JQuery Animate + ScrollLeft doesn't work on IE

Question

Hi stackoverflow community,

Code:

HTML:

              <div class="panel">
                <span class="expand-icon">Expand</span>
                <div class="panel__content">
                  <img src="images/...">
                </div>
                <aside class="panel-widget">
                  <div class="panel-widget__content">
                    <span class="close-icon"></span>
                    <div class="content__hero">
                      <img src="images/...">
                    </div>
                  </div>
                </aside><!-- /widget -->
              </div><!-- /panel -->

Binding Events:

    this.container.on('collapsePanel', function (event) {
     obj._collapsePanel();
      event.preventDefault();
    });

    this.container.on('expandPanel', function (event) {
      obj._expandPanel();
      event.preventDefault();
    });

    this.expandButton.on('click', function (event) {
      $(this).trigger('expandPanel');
      event.preventDefault();
    });

    this.collapseButton.on('click', function (event) {
      $(this).trigger('collapsePanel');
      event.preventDefault();
    });

The events:

  _restoreSiteContent : function _restoreSiteContent() {
    $('html, body').stop().animate({
      'scrollLeft': 0
    }, 218, 'swing', $.noop());
  },

  _pushSiteContent : function _pushSiteContent() {
    var obj;

    obj = this;

    $('html, body').stop().animate({
      'scrollLeft': obj.widget.innerWidth + obj.gutter
    }, 218, 'swing', $.noop());
  },

Expected:

On click to my <span> element (it is not wrapper within an anchor), the entire page content should move to the left side and a sort of popover "comes out" (actually it is always there but position absolute so the scroll bar on the beginning doesn't allow the user to scroll to that point), once the screen get moved user should be able to scroll in any direction (perhaps, to navigate the page content).

I expect support on IE9+

The issue:

The code works perfectly on mobile and desktop (Safari, FF and Chrome) but doesn't work on IE (9, 10 or 11)

As reference:

I've seen LOT of this cases on the web and also here on the stackoverflow, I've already tried the following posts (Just as a reference to show that I try to make my research before end here making a question):

And many others... But I can't figure out what happen in my case.

I'd also tried to achieve what I want through:

$(document).scrollLeft(offset);

window.scrollTo(offset);

or

event.preventDefault(); before the code

By now I set as a IE fallback I'm moving the page content with:

translate3d(0, offset, 0)

But that is not what I want since it doesn't show the scroll bars (which is a requirement).

Lastly, keep in mind that I test if the events are being called and they does, however as I said above on IE the code doesn't work (the event is triggered, the code runs but nothing happens)

JQuery Animate + ScrollLeft doesn't work on IE

0 Answers0