JSFiddle - React, Tailwind, and code Playground

by bloodberry

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Hover and Scroll this: |______Separate____|     This is body element:

<br>
<button type="button" class="scroll">Click to scroll down this fixed</button>
 |______Separate____| 
<button type="button" class="scrollbody">Click to scroll down body</button>
<div class="fixed">
  <div id="content">
    <ul>
      <li>firstrow</li>
      <li>bbbbbbbb</li>
      <li>cccccccc</li>
      <li>dddddddd</li>
      <li>asd</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      <li>i</li>
      <li>j</li>
      <li>k</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>lastrow</li>
    </ul>
  </div>
</div>


              
              
        
<div class="notfixed">
  <ul>
    <li>Not Fixed</li>
   ...

CSS

.fixed{
  position: fixed;
  overflow:hidden;
  width: 100px;
  height:200px;
  overflow-y: scroll;
  background-color:green;

overflow-x: hidden;
}

.notfixed{
 margin-left:60%;
}

JavaScript

// I couldn't scroll down the fixed div
$('.scroll').click(function(){
	var h = $('#content').height();
  // alert(h);
  $('#content').animate({
  scrollTop: h
  },1000);
});


// could scroll body instead
$('.scrollbody').click(function(){
	var h = $('body,html').height();
  // alert(h);
  $('body,html').animate({
  scrollTop: h
  },1000);
});

// why?