JSFiddle - React, Tailwind, and code Playground

by Roland Doda

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="vueapp">
  <div id="app">
  <h3 style="position:absolute;top:0px;left:0px;width:100%;background:red;" v-show="showSearchBar==1">Hello</h3>
  <div class="app">
    <p>
      orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, ipsum nec porta tincidunt, ex ligula efficitur libero, eu euismod augue lectus ut leo. Ut hendrerit est vestibulum magna suscipit, eu tincidunt orci malesuada. Sed sit amet orci id arcu blandit lobortis. Nam faucibus sem mi, vitae sollicitudin libero vulputate at. Donec convallis est eget auctor rhoncus. Sed maximus urna est, non tincidunt felis laoreet ac. Etiam in ipsum ut justo consectetur fringilla id eu dui. Etiam facilisis ornare risus, hendrerit commodo leo molestie non. Nulla porta sagittis fermentum. Sed aliquam elementum dolor, semper euismod risus congue et. Suspendisse potenti. Suspendisse venenatis augue quis finibus gravida. Nullam ac eleifend urna. In suscipit velit a ante consequat, in maximus nisl cursus. Nam consequat ornare lorem.

Mauris ac ornare diam. Suspendisse vitae lorem velit. Etiam eu dictum lorem, ut scelerisque enim. Quisque gravida, risus quis faucibus malesuada, dui metus sagittis diam, quis dignissim neque felis et turpis. Pellentesque auctor orci ut elit accumsan, non faucibus est interdum. Sed viverra nisi sapien, non mollis dui faucibus sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sit amet lobortis nibh, ut cursus eros. Nulla consectetur tincidunt magna vel fringilla. Suspendisse id lacus ex. Cras ut risus mattis, ullamcorper urna et, malesuada sapien. Duis facilisis arcu turpis, in dignissim ex maximus ut.

Proin et sapien nec lorem ultrices pretium. Cras dictum ut eros ut semper. Etiam ac mattis dolor. Aliquam dictum magna ut lacus viverra, eget luctus tortor sodales. Suspendisse feugiat consequat ante eu pulvinar. Nunc condimentum imperdiet blandit....

CSS

#app{
  width:300px;
  height:500px;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid #ccc;
}
#app .app{
  width:100%;
  
  background:#ededed;
}

JavaScript

new Vue({
  el : '#vueapp',
  data : {
  	showSearchBar : 0
  },
  created(){
  	const _self = this;
    document.querySelector('#app').addEventListener('scroll', function (e) {
    console.log(e)
    })
    
/*     document.querySelector('#app').addEventListener('scroll') = function(e) {
    console.log(e)
    alert();
    
        if(document.querySelector('#app').scrollTop >= 10) {
            _self.showSearchBar = 1;
        }else{
            _self.showSearchBar = 0;
        }
    } */
    // --
  }
});

    /* document.querySelector('#app').onscroll = function() {
    
    alert(1);
    } */