Uikit: Off-canvas caused the body scrolling to top

Created on 27 Jan 2019  路  3Comments  路  Source: uikit/uikit

UIkit version


3.0.2

Browser

chrome

Reproduction Link


<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
  <nav className="uk-navbar-container uk-navbar-attached uk-margin-bottom" uk-navbar="true">
    <div className="uk-container uk-flex uk-width-1-1@s">
      <div className="uk-navbar-left">
        <i className="uk-navbar-toggle uk-link" uk-toggle="target: #offcanvas-slide">
          <span uk-icon="menu"></span> <span className="uk-margin-small-left">Menu</span>
        </i>
      </div>
      {authMenu}
    </div>
  </nav>
</div>
<div id="offcanvas-slide" uk-offcanvas="overlay: true">
  <div className="uk-offcanvas-bar">
    <ul className="uk-nav uk-nav-default">
      <li className="uk-active"><a href="#">Active</a></li>
      <li className="uk-parent">
        <a href="#">Parent</a>
        <ul className="uk-nav-sub">
          <li><a href="#">Sub item</a></li>
          <li><a href="#">Sub item</a></li>
        </ul>
      </li>
      <li className="uk-nav-header">Header</li>
      <li><a href="#"><span className="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
      <li><a href="#"><span className="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
      <li className="uk-nav-divider"></li>
      <li><a href="#"><span className="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
    </ul>
  </div>
</div>

Steps to reproduce

Using a sticky navbar, and then set a element with uk-toggle="target:#my-offfcanvas",like the codes above

What is Expected?

Keep the origin position of body after toggling offcanvas, it's not expected to go to the top

What is actually happening?

The body will scroll to top everytime i toggled Off-canvas.There is a same issue at #8,but i didn't find any solutions, has this issue been solved at current version? or is there anything wrong with my codes?

Most helpful comment

Thanks and actually i checked my codes, i set both html,body{height:100%}, which as a direct result of this issue.... I am finding some other solutuions to deal with this, thanks anyway

All 3 comments

The code snippet is working fine for me. There might be something else interfering?

Thanks and actually i checked my codes, i set both html,body{height:100%}, which as a direct result of this issue.... I am finding some other solutuions to deal with this, thanks anyway

I too had html,body{height:100%} set. I commented it out and now the page does not scroll to the top when uk-offcanvas is closed. Thanks for figuring this out s1973!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AntoninJarolim picture AntoninJarolim  路  3Comments

zsj1029 picture zsj1029  路  3Comments

evdama picture evdama  路  3Comments

albeaver picture albeaver  路  3Comments

wozzup picture wozzup  路  4Comments