eddiemf/vue-affix

This is based on the html/body tag scroll bar?

zq99299 opened this issue · 1 comments

zq99299 commented

Now my html/body scrollbar is disabled, and the content is nested inside a div with a scrollbar. Both vue-affix and relative content are in this div, but vue-affix does not take effect when the div's scrollbar scrolls.

<html> ---> no scroll bar
 <body> ---> no scroll bar
    <div>      ---> With scroll bar
      <vue-affix relative-element-selector="#example-content">
       xxx
      </vue-affix>
     <section id="example-content"></section>
   </div>
 </body>
</html>
eddiemf commented

By default the plugin will listen the window scroll event for changes, but you can change it with the scrollContainerSelector property in your vue-affix.

In your example it should be like this:

<div id="scrollable-container">      ---> With scroll bar
  <vue-affix relative-element-selector="#example-content" scrollContainerSelector="#scrollable-container">
     xxx
  </vue-affix>
  <section id="example-content"></section>
</div>
  • 👍1