HTML structure inside a selected element affecting other #514

tamudosoyyo · 2023-03-29T15:12:59Z

tamudosoyyo
Mar 29, 2023

Im testing scrollbars native behaviour libraries and OverlayScrollbars is by far the best I have found but Im having trouble with a thing.
OverlayScrollbars create the HTML scrollbars structure inside the element it is targeting:
this structure

<div class="os-scrollbar os-scrollbar-horizontal">
    <div class="os-scrollbar-track">
        <div class="os-scrollbar-handle">
        </div>
    </div>
</div>
<div class="os-scrollbar os-scrollbar-vertical">
    <div class="os-scrollbar-track">
        <div class="os-scrollbar-handle">
        </div>
    </div>
</div>

Im targeting the body element and I cant have this structure on it, I wonder if there is a functionality that lets me create the HTML structure inside a selected element of my own and affect other.
Reading the docs I saw a slot option and did this:
target: document.querySelector('body'),
scrollbars: {
slot: document.querySelector('#target'),
}

It creates successfully the HTML scrollbars structure inside the #target element and apparently affects the body. However my scrollbar remains completely static (it doesnt go down the page as I also scroll down). Im having trouble with this problem for hours and wanted to know if someone can help me here. Thanks a lot.

Answered by KingSora

Mar 29, 2023

Good day @tamudosoyyo

The scrollbar elements treat its slot element as their parent. When the scrollbars are rendered they somehow need to know how big in size their track and their handles have to be. They do this by taking the size of the slot element as the base.

Please try to add dimensions to the #target element in order to provide proper context to the scrollbars.

View full answer

tamudosoyyo · 2023-03-29T15:16:39Z

tamudosoyyo
Mar 29, 2023
Author

Here is my complete code if it can help (its a simple one for testing purposes)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/styles/overlayscrollbars.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/browser/overlayscrollbars.browser.es6.min.js"></script>
  </head>
<body>    
    <p>HOLA11</p>
    <p>Quisque eget mi sit amet metus vulputate tempus sit amet nec neque</p>
    <p>Etiam sodales sapien et porttitor molestie</p>
    <p>Proin pharetra quam ac leo pellentesque, id dignissim odio faucibus</p>
    <p>Donec accumsan ex et lacus rhoncus, ullamcorper scelerisque turpis ullamcorper</p>
    <p>Nulla in purus vel purus scelerisque vehicula eget non augue</p>
    <p>Mauris lobortis risus sit amet elit placerat, eu euismod velit egestas</p>
    <p>Praesent in odio varius, pulvinar orci iaculis, auctor tellus</p>
    <p>Curabitur venenatis purus a mauris pharetra eleifend</p>
    <p>Quisque eget elit ut lectus sodales tempor et vitae felis</p>
    <p>Suspendisse quis justo pellentesque massa aliquam finibus</p>
    <p>Nullam euismod neque nec sapien ullamcorper, nec commodo augue gravida</p>
    <p>Vestibulum ac erat ut enim vestibulum vulputate ut quis risus</p>
    <p>Nulla interdum justo at lectus convallis, sed euismod eros maximus</p>
    <p>Ut id justo non justo ultricies pellentesque</p>
    <p>Suspendisse vulputate lectus blandit quam auctor tincidunt</p>
    <p>Curabitur porta neque nec augue pretium, a vehicula risus facilisis</p>
    <p>Vestibulum rhoncus tortor sed eleifend vehicula</p>
    <p>Pellentesque ut magna sed nisi ullamcorper euismod commodo sit amet arcu</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    <p>Quisque eget mi sit amet metus vulputate tempus sit amet nec neque</p>
    <p>Etiam sodales sapien et porttitor molestie</p>
    <p>Proin pharetra quam ac leo pellentesque, id dignissim odio faucibus</p>
    <p>Donec accumsan ex et lacus rhoncus, ullamcorper scelerisque turpis ullamcorper</p>
    <p>Nulla in purus vel purus scelerisque vehicula eget non augue</p>
    <p>Mauris lobortis risus sit amet elit placerat, eu euismod velit egestas</p>
    <p>Praesent in odio varius, pulvinar orci iaculis, auctor tellus</p>
    <p>Curabitur venenatis purus a mauris pharetra eleifend</p>
    <p>Quisque eget elit ut lectus sodales tempor et vitae felis</p>
    <p>Suspendisse quis justo pellentesque massa aliquam finibus</p>
    <p>Nullam euismod neque nec sapien ullamcorper, nec commodo augue gravida</p>
    <p>Vestibulum ac erat ut enim vestibulum vulputate ut quis risus</p>
    <p>Nulla interdum justo at lectus convallis, sed euismod eros maximus</p>
    <p>Ut id justo non justo ultricies pellentesque</p>
    <p>Suspendisse vulputate lectus blandit quam auctor tincidunt</p>
    <p>Curabitur porta neque nec augue pretium, a vehicula risus facilisis</p>
    <p>Vestibulum rhoncus tortor sed eleifend vehicula</p>
    <p>Pellentesque ut magna sed nisi ullamcorper euismod commodo sit amet arcu</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    <p>Quisque eget mi sit amet metus vulputate tempus sit amet nec neque</p>
    <p>Etiam sodales sapien et porttitor molestie</p>
    <p>Proin pharetra quam ac leo pellentesque, id dignissim odio faucibus</p>
    <p>Donec accumsan ex et lacus rhoncus, ullamcorper scelerisque turpis ullamcorper</p>
    <p>Nulla in purus vel purus scelerisque vehicula eget non augue</p>
    <p>Mauris lobortis risus sit amet elit placerat, eu euismod velit egestas</p>
    <p>Praesent in odio varius, pulvinar orci iaculis, auctor tellus</p>
    <p>Curabitur venenatis purus a mauris pharetra eleifend</p>
    <p>Quisque eget elit ut lectus sodales tempor et vitae felis</p>
    <p>Suspendisse quis justo pellentesque massa aliquam finibus</p>
    <p>Nullam euismod neque nec sapien ullamcorper, nec commodo augue gravida</p>
    <p>Vestibulum ac erat ut enim vestibulum vulputate ut quis risus</p>
    <p>Nulla interdum justo at lectus convallis, sed euismod eros maximus</p>
    <p>Ut id justo non justo ultricies pellentesque</p>
    <p>Suspendisse vulputate lectus blandit quam auctor tincidunt</p>
    <p>Curabitur porta neque nec augue pretium, a vehicula risus facilisis</p>
    <p>Vestibulum rhoncus tortor sed eleifend vehicula</p>
    <p>Pellentesque ut magna sed nisi ullamcorper euismod commodo sit amet arcu</p>

<div id="target"></div>
<style>
.os-theme-variableaux {
    --os-handle-interactive-area-offset: 0px;
    --os-handle-bg: rgba(0,0,0,.44); 
    --os-handle-bg-hover: rgba(0,0,0,.55);
    --os-handle-bg-active: rgba(0,0,0,.66); 
    --os-size: 6px; 
    --os-handle-border-radius: 10px; 


    --os-padding-perpendicular: 2px; 
    --os-padding-axis: 2px; 
    --os-track-border-radius: 10px; 
}
.os-theme-variableaux .os-scrollbar-track{
  background-color: rgba(255, 0, 0, 0) !important; 
}
</style>

    <script>
      
      var { 
        OverlayScrollbars, 
        ScrollbarsHidingPlugin, 
        SizeObserverPlugin, 
        ClickScrollPlugin,
      } = OverlayScrollbarsGlobal;

      OverlayScrollbars.plugin(ClickScrollPlugin); 
      OverlayScrollbars.plugin(SizeObserverPlugin); 
      OverlayScrollbars.plugin(ScrollbarsHidingPlugin); 

      OverlayScrollbars(
  {
    target: document.querySelector('body'),
 scrollbars: {
   slot: document.querySelector('#target'),
 },
  },
  {
    showNativeOverlaidScrollbars: true,
    overflow: {
      y: 'scroll',
      x: 'hidden',
    },
    scrollbars: {
      theme: 'os-theme-variableaux',
      visibility: 'auto',
      autoHide: 'scroll',
      autoHideDelay: 500,
      dragScroll: true,
      clickScroll: true,
      pointers: ['mouse', 'touch', 'pen'],
    },
  }
);

 
    </script>
  </body>

</html>

0 replies

KingSora · 2023-03-29T15:37:18Z

KingSora
Mar 29, 2023
Maintainer

Good day @tamudosoyyo

The scrollbar elements treat its slot element as their parent. When the scrollbars are rendered they somehow need to know how big in size their track and their handles have to be. They do this by taking the size of the slot element as the base.

Please try to add dimensions to the #target element in order to provide proper context to the scrollbars.

3 replies

KingSora Mar 29, 2023
Maintainer

I've created a demo for you based on your code: https://jsfiddle.net/srehwyL6/1/ :)

tamudosoyyo Mar 29, 2023
Author

That helps a lot, thanks =)

KingSora Mar 29, 2023
Maintainer

youre welcome :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML structure inside a selected element affecting other #514

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

HTML structure inside a selected element affecting other #514

tamudosoyyo Mar 29, 2023

Replies: 2 comments · 3 replies

tamudosoyyo Mar 29, 2023 Author

KingSora Mar 29, 2023 Maintainer

KingSora Mar 29, 2023 Maintainer

tamudosoyyo Mar 29, 2023 Author

KingSora Mar 29, 2023 Maintainer

tamudosoyyo
Mar 29, 2023

Replies: 2 comments 3 replies

tamudosoyyo
Mar 29, 2023
Author

KingSora
Mar 29, 2023
Maintainer

KingSora Mar 29, 2023
Maintainer

tamudosoyyo Mar 29, 2023
Author

KingSora Mar 29, 2023
Maintainer