0

I have code for scrolling canvas and that just work. And I put the Button at right side just cover when I press the other button for running scrolling canvas.

I will the button still show follow the scrolling canvas, when that open and close.

this my code

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>

<div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" data-bs-target="#demo">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="demo">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

<div style="right: 0; top: 50%; position: fixed; transform: translate(0px, -50%) rotate(90deg); transform-origin: top right; z-index: 20;">
  <button class="btn btn-primary" type="button" style="box-shadow: 0px 8px 16px #264A9E66; border-radius: 0 0 8px 8px; letter-spacing: 1.15px; padding: 9px 12px; gap: 0.5rem;">Example Button</button>
</div>

Thanks for helping

Crezzur
  • 1,303
  • 2
  • 18
  • 37
Mainboard
  • 1
  • 2
  • Does this post https://stackoverflow.com/questions/70384855/how-can-i-attach-a-button-to-an-off-canvas-drawer-with-bootstrap-5 answer your question? – Crezzur Apr 22 '23 at 12:45

0 Answers0