search

vmitsaras / js-offcanvas

A lightweight, flexible jQuery off-canvas navigation plugin which lets you create fully accessible sidebar or top/bottom sliding (or push) panels with keyboard interactions and ARIA attributes.
http://codepen.io/vmitsaras/pen/gwGwJE
MIT License
269 stars 30 forks source link

Scrolls to the top of menu - fixed #24

Closed pinkladywithcoco closed 6 years ago

pinkladywithcoco commented 6 years ago

If you have many divs inside the menu when you scroll down. Close the menu with dataOffcanvas.close(); and open it again with dataOffcanvas.open(); then it scrolls to the top of menu. How can you make it stay there instead of scrolling to top??

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
  <meta charset="UTF-8">
  <title>Accessible Offcanvas </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="publisher" href="https://plus.google.com/u/0/102875256234651427686/">
    <script type="application/ld+json">
    {
      "@context": "http://schema.org/",
      "@type": "SoftwareSourceCode",
      "name": "Accessible Offcanvas Plugin",
      "url": "http://offcanvas.vasilis.co",
      "description": "Accessible Offcanvas jQuery plugin, using ARIA.",
      "keywords": "offcanvas, accesible, jquery plugin",
      "codeRepository":"https://github.com/vmitsaras/js-offcanvas"
    }
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400:500'>

     <style type="text/css">

       .c-offcanvas, .c-offcanvas-content-wrap {
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.c-offcanvas, .c-offcanvas-content-wrap, .c-offcanvas-bg.c-offcanvas-bg--reveal, .c-offcanvas-bg.c-offcanvas-bg--push {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.6, 1);
}

.c-offcanvas.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

/**
 * Offcanvas-content-wrap
*/
.c-offcanvas-content-wrap {
  position: relative;
  z-index: 3;
  overflow: hidden;
}

/**
 * Offcanvas Panel
*/
.c-offcanvas {
  position: fixed;
  min-height: 100%;
  max-height: none;
  top: 0;
  display: block;
  background: #fff;
  overflow: auto;
}
.c-offcanvas--opening {
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.c-offcanvas.is-closed {
  max-height: 100%;
  overflow: hidden;
  visibility: hidden;
  box-shadow: none;
}

.c-offcanvas.is-scrollable {
  overflow-y: auto;
}

.c-offcanvas--overlay {
  z-index: 6;
}

.c-offcanvas--reveal {
  z-index: 2;
}

/**
 * Offcanvas BG-Overlay
*/
.c-offcanvas-bg {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 5;
  left: -100%;
  background-color: transparent;
  transition: background-color 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.c-offcanvas-bg.is-animating, .c-offcanvas-bg.is-open {
  left: 0;
  background-color: rgba(0, 0, 0, 0.68);
  visibility: visible;
}
.c-offcanvas-bg.is-closed {
  visibility: hidden;
}

/**
 * Position Left
 *
*/
.c-offcanvas--left {
  height: 100%;
  width: 17em;
  transform: translate3d(-17em, 0, 0);
}

/**
 *  Position Right
 *
*/
.c-offcanvas--right {
  height: 100%;
  width: 17em;
  right: 0;
  transform: translate3d(17em, 0, 0);
}

/**
 * Position Top
 *
*/
.c-offcanvas--top {
  left: 0;
  right: 0;
  top: 0;
  height: 12.5em;
  min-height: auto;
  width: 100%;
  transform: translate3d(0, -12.5em, 0);
}

/**
 * Position Bottom
 *
*/
.c-offcanvas--bottom {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12.5em;
  min-height: auto;
  width: 100%;
  transform: translate3d(0, 12.5em, 0);
}

/**
 * Reveal
 *
*/
.c-offcanvas-content-wrap {
  z-index: 3;
}

.c-offcanvas-content-wrap--reveal.c-offcanvas-content-wrap--left.is-open {
  transform: translate3d(17em, 0, 0);
}
.c-offcanvas-content-wrap--reveal.c-offcanvas-content-wrap--right.is-open {
  transform: translate3d(-17em, 0, 0);
}

.c-offcanvas--reveal {
  z-index: 0;
  transform: translate3d(0, 0, 0);
}

.c-offcanvas-bg.c-offcanvas-bg--reveal.c-offcanvas-bg--left.is-open {
  transform: translate3d(17em, 0, 0);
}
.c-offcanvas-bg.c-offcanvas-bg--reveal.c-offcanvas-bg--right.is-open {
  transform: translate3d(-17em, 0, 0);
}

/**
 * Push
 *
*/
.c-offcanvas--push {
  z-index: 6;
}
.c-offcanvas--push--opening {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.c-offcanvas-content-wrap {
  z-index: 3;
}

.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--left.is-open {
  transform: translate3d(17em, 0, 0);
}
.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--right.is-open {
  transform: translate3d(-17em, 0, 0);
}

.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--left.is-open {
  transform: translate3d(17em, 0, 0);
}
.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--right.is-open {
  transform: translate3d(-17em, 0, 0);
}

.u-unstyled, .o-list-inline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-pos-relative {
  position: relative !important;
}

.u-hidden-visually {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
}

.u-text-center {
  text-align: center;
}

[tabindex="-1"]:focus {
  outline: 0;
}

.o-list-inline {
  padding: 0;
  list-style: none;
}
.o-list-inline > li {
  display: inline-block;
}

html {
  overflow: hidden;
  font-size: 1em;
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
  background-color: #fff;
  color: #333;
  overflow-y: scroll;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

p {
  font-size: 1.18em;
  margin-bottom: 1.18em;
  font-weight: 400;
  font-style: normal;
  color: #424242;
}
@media (min-width: 20em) and (max-width: 41.25em) {
  p {
    font-size: 1.18em;
  }
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
  p {
    font-size: 1.18em;
  }
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
  p {
    font-size: 1.18em;
  }
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
  p {
    font-size: 1.18em;
  }
}
@media (min-width: 81.25em) {
  p {
    font-size: 1.18em;
  }
}

h1 {
  font-size: 1.6992em;
  margin: 0 0 1em 0;
  line-height: 1.1;
  font-weight: 500;
  font-style: normal;
}
@media (min-width: 20em) and (max-width: 41.25em) {
  h1 {
    font-size: 1.6992em;
  }
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
  h1 {
    font-size: 2.15055em;
  }
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
  h1 {
    font-size: 2.3128em;
  }
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
  h1 {
    font-size: 2.655em;
  }
}
@media (min-width: 81.25em) {
  h1 {
    font-size: 3.0208em;
  }
}

h2 {
  font-size: 1.416em;
  line-height: 1em;
  font-weight: 400;
  font-style: normal;
  padding: 0 0 0.45074em;
  margin: 1.18em 0 1.18em 0;
  text-transform: capitalize;
  text-indent: -2px;
}
@media (min-width: 20em) and (max-width: 41.25em) {
  h2 {
    font-size: 1.416em;
  }
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
  h2 {
    font-size: 1.593em;
  }
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
  h2 {
    font-size: 1.652em;
  }
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
  h2 {
    font-size: 1.77em;
  }
}
@media (min-width: 81.25em) {
  h2 {
    font-size: 1.888em;
  }
}

h3 {
  font-size: 1.2em;
  margin: 1.18em 0 0.7293em 0;
  font-weight: 500;
  font-style: normal;
  line-height: 1.188em;
  color: #2b2b2b;
  text-indent: -1px;
}
@media (min-width: 20em) and (max-width: 41.25em) {
  h3 {
    font-size: 1.2em;
  }
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
  h3 {
    font-size: 1.35em;
  }
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
  h3 {
    font-size: 1.4em;
  }
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
  h3 {
    font-size: 1.5em;
  }
}
@media (min-width: 81.25em) {
  h3 {
    font-size: 1.6em;
  }
}

h4 {
  font-size: 1.18em;
  font-weight: 300;
  line-height: 1.409em;
  margin: 1em 0 0 0;
  letter-spacing: 1px;
  color: #727272;
  text-transform: uppercase;
}
@media (min-width: 20em) and (max-width: 41.25em) {
  h4 {
    font-size: 1.18em;
  }
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
  h4 {
    font-size: 1.18em;
  }
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
  h4 {
    font-size: 1.18em;
  }
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
  h4 {
    font-size: 1.18em;
  }
}
@media (min-width: 81.25em) {
  h4 {
    font-size: 1.18em;
  }
}

.l-wrapper {
  max-width: 100%;
  margin: 0 auto;
  padding-right: 12px;
  padding-left: 12px;
}
@media (min-width: 41.25em) {
  .l-wrapper {
    padding-right: 24px;
    padding-left: 24px;
  }
}
@media (min-width: 46.25em) {
  .l-wrapper {
    max-width: 34.2556em;
  }
}
@media (min-width: 81.25em) {
  .l-wrapper {
    max-width: 46.97082em;
  }
}

.c-button {
  background: transparent;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.08));
  background-color: #4e4e4e;
  border-color: #4e4e4e;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: 300;
  margin: 0;
  padding: 0.38198em 0.7293em;
  margin: 0 0 0.38198em;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  overflow: hidden;
  vertical-align: middle;
}
.c-button:hover, .c-button:focus {
  color: #fafafa;
}
@media (min-width: 46.25em) {
  .c-button {
    font-size: 1.18em;
  }
}

.c-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.c-button:hover,
.c-button:focus,
.c-button:active {
  outline: 0;
  text-decoration: none;
}

.c-button:focus:not(:hover) {
  outline: 4px solid #c5dbfc;
}

.c-button--hard {
  border-radius: 0;
}

.c-button--green {
  color: #ffffff;
  background-color: #8ecd73;
  border-color: #8ecd73;
}
.c-button--green:hover, .c-button--green:focus, .c-button--green:active {
  background-color: #9dd486;
  border-color: #9dd486;
  outline: none;
}

.c-button--blue {
  color: #ffffff;
  background-color: #378bb5;
  border-color: #378bb5;
}
.c-button--blue:hover, .c-button--blue:focus, .c-button--blue:active {
  background-color: #2b6d8e;
  border-color: #2b6d8e;
  outline: none;
}

.c-offcanvas .c-button {
  margin-bottom: 0;
}

.c-button--close-bottom {
  position: absolute;
  left: 50%;
  bottom: -10px;
  z-index: 10;
  margin-left: -37px;
}
.c-button--close-bottom:hover, .c-button--close-bottom:focus {
  outline: none !important;
}

.c-button--close-right-top {
  position: absolute;
  top: -1px;
  right: -1px;
  border-radius: 0;
}
.c-button--close-right-top:hover, .c-button--close-right-top:focus {
  outline: none !important;
}

.c-button--close-right {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  left: 0;
}
.c-button--close-right:hover, .c-button--close-right:focus {
  outline: none !important;
}

.c-input:focus {
  z-index: 1;
  outline: 0;
  border-color: #757575;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

.c-input-add-on {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1.5em;
}

.c-input-add-on__field {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.c-input-add-on__field:not(:first-child) {
  margin-left: -1px;
}

.c-input-add-on__field:not(:last-child) {
  border-right: 0;
}

.c-input-add-on__item {
  margin: 0;
}

.c-input-add-on__field,
.c-input-add-on__item {
  border: 1px solid rgba(147, 128, 108, 0.25);
  padding: 0.5em 0.75em;
}

.c-input-add-on__field:first-child,
.c-input-add-on__item:first-child {
  border-radius: 2px 0 0 2px;
}

.c-input-add-on__field:last-child,
.c-input-add-on__item:last-child {
  border-radius: 0 2px 2px 0;
}

.c-menu {
  margin: 0;
}

.c-menu--border .c-menu__item {
  border-bottom: 1px solid #e0e0e0;
}

.c-menu__item--heading {
  padding: 1.18em;
  text-indent: -0.27858em;
  font-size: 1.2em;
}
@media (min-width: 20em) and (max-width: 41.25em) {
  .c-menu__item--heading {
    font-size: 1.2em;
  }
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
  .c-menu__item--heading {
    font-size: 1.35em;
  }
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
  .c-menu__item--heading {
    font-size: 1.4em;
  }
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
  .c-menu__item--heading {
    font-size: 1.5em;
  }
}
@media (min-width: 81.25em) {
  .c-menu__item--heading {
    font-size: 1.6em;
  }
}

.c-menu__link {
  display: block;
  width: 100%;
  padding: 0.45074em 1.18em;
  text-decoration: none;
  line-height: 1.618em;
  color: rgba(43, 43, 43, 0.9);
  font-size: 1.18em;
  background: #fafafa;
}
@media (min-width: 20em) and (max-width: 41.25em) {
  .c-menu__link {
    font-size: 1.18em;
  }
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
  .c-menu__link {
    font-size: 1.18em;
  }
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
  .c-menu__link {
    font-size: 1.18em;
  }
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
  .c-menu__link {
    font-size: 1.18em;
  }
}
@media (min-width: 81.25em) {
  .c-menu__link {
    font-size: 1.18em;
  }
}
.c-menu__link:hover, .c-menu__link:focus {
  color: #212121;
  outline: none;
  text-decoration: none;
  background: #eee;
}

.c-menu--small .c-menu__link {
  font-size: 1.18em;
}

.c-page {
  overflow: hidden;
  padding-top: 1.6992em;
}
@media (min-width: 20em) and (max-width: 41.25em) {
  .c-page {
    padding-top: 1.6992em;
  }
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
  .c-page {
    padding-top: 2.15055em;
  }
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
  .c-page {
    padding-top: 2.3128em;
  }
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
  .c-page {
    padding-top: 2.655em;
  }
}
@media (min-width: 81.25em) {
  .c-page {
    padding-top: 3.0208em;
  }
}

.c-offcanvas--overflow-top {
  overflow: visible;
}

body,
.c-offcanvas-content-wrap {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.c-offcanvas--shadow.is-closed:after {
  content: none;
}

.c-offcanvas--shadow:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.c-offcanvas--shadow-left:after {
  left: 0;
}

.c-offcanvas--shadow-right:after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
}

.c-offcanvas--bottom.is-open {
  box-shadow: 0 -5px 25px rgba(5, 5, 5, 0.38);
}

.c-offcanvas-bg--push.c-offcanvas-bg--push {
  background: transparent;
}

.c-offcanvas--push.c-offcanvas--left {
  border-right: 1px solid #e0e0e0;
}
.c-offcanvas--push.c-offcanvas--right {
  border-left: 1px solid #e0e0e0;
}

.c-offcanvas--top .c-menu__item {
  display: inline-flex;
}

.c-callout {
  border: 2px solid #bdbdbd;
  border-radius: 5px;
  background: #eee;
  padding: 1.18em;
  margin-top: 3.08915em;
}

.c-callout__title {
  margin: 0;
}

.c-callout__text {
  font-size: 0.98333em;
  margin-top: 0;
  color: #757575;
}
@media (min-width: 20em) and (max-width: 41.25em) {
  .c-callout__text {
    font-size: 0.98333em;
  }
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
  .c-callout__text {
    font-size: 0.87407em;
  }
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
  .c-callout__text {
    font-size: 0.84286em;
  }
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
  .c-callout__text {
    font-size: 0.78667em;
  }
}
@media (min-width: 81.25em) {
  .c-callout__text {
    font-size: 0.7375em;
  }
}

.c-callout__button {
  width: 100%;
}

.c-callout__footer {
  color: #424242;
  font-size: 0.98333em;
}
@media (min-width: 20em) and (max-width: 41.25em) {
  .c-callout__footer {
    font-size: 0.98333em;
  }
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
  .c-callout__footer {
    font-size: 0.87407em;
  }
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
  .c-callout__footer {
    font-size: 0.84286em;
  }
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
  .c-callout__footer {
    font-size: 0.78667em;
  }
}
@media (min-width: 81.25em) {
  .c-callout__footer {
    font-size: 0.7375em;
  }
}
.c-callout__footer a {
  color: inherit;
  text-decoration: none;
}
.c-callout__footer a:hover, .c-callout__footer a:focus {
  color: #212121;
  outline: none;
  text-decoration: underline;
}

</style>

</head>

<body>

  <!--Offcanvas Content Wrapper-->
<main class="c-offcanvas-content-wrap" role="main" aria-labelledby="accesible-offcanvas">  
  <div class="c-page l-wrapper u-pos-relative">

    <h1 id="accesible-offcanvas"><span class="u-hidden-visually">Examples </span>Accesible Offcanvas</h1>
    <h3>Overlay</h3>
    <button class="c-button js-offcanvas-trigger" data-offcanvas-trigger="off-canvas-left">Left</button>

  </div>
</main>

<!--
Offcanvas Panels
-->

<!--Left-->
<aside class="js-offcanvas" id="off-canvas-left" role="complementary">
  <div class="c-offcanvas__inner o-box u-pos-relative">
      <ul class="c-menu c-menu--border u-unstyled">
        <li class="c-menu__item c-menu__item--heading">Header</li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
        <li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
    </ul>
    </ul>
  </div>
</aside>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='https://npmcdn.com/js-offcanvas@1.0/dist/_js/js-offcanvas.pkgd.min.js'></script>

    <script  src="js/index.js"></script>

</body>

</html>
vmitsaras commented 6 years ago

Is the Top-Menu fixed? Maybe is your Trigger Button at the top and after closing the offcanvas its gets focused. Codpen or a test-site?

pinkladywithcoco commented 6 years ago

I have taken the code from: https://codepen.io/vmitsaras/pen/gwGwJE and updated it above so you can test youself. When we scroll down. Close the menu. Open again. It scrolls to top.

pinkladywithcoco commented 6 years ago

I have fixed the problem now

daveromsey commented 5 years ago

@pinkladywithcoco Do you mind sharing what you did to fix it? I'm running into the same issue.

Edit: nevermind @pinkladywithcoco I was able to fix it with the changes suggested by vmitsaras.

vmitsaras commented 5 years ago

@daveromsey Do you have a Codepen?

Is the Top-Menu fixed? Maybe is your Trigger Button at the top and after closing the offcanvas its gets focused. Codpen or a test-site?

daveromsey commented 5 years ago

Hello @vmitsaras,

Thank you for chiming in!

Here's a Pen of the forked Demo that demonstrates the issues I'm experiencing, where upon opening, the offcanvas sidebar scrolls to the top and gives focus to an element. I'd prefer not to have the scrolling to the top or focus behavior.

In this fork, I duplicated a bunch of content within the Left Offcanvas panel to give it plenty of height and added some styles to .c-offcanvas (bottom of the CSS panel) so that it would allow vertical scrolling and would highlight the focused element for clarity while troubleshooting.

To reproduce the issues, click on the Overlay Left button to open the Offcanvas menu, scroll down on the menu, close the menu. Now, open the menu again with the Overlay Left button. The menu will scroll to the top and focus the top item.

My use case is that I have a complex form inside the Offcanvas sidebar that users can toggle open and closed while working on it. Ideally, when they re-open the sidebar, the scroll position should remain where it was when they closed it.

vmitsaras commented 5 years ago

You can control which element would be focused with the [data-focus].

Example for your Issue

<aside class="js-offcanvas" id="off-canvas-left" role="complementary">
  <div class="c-offcanvas__inner o-box u-pos-relative" tabindex="-1" data-focus>
     ...
  </div>
</aside>
daveromsey commented 5 years ago

@vmitsaras You're amazing! Thanks, that did the trick.