JSFiddle - React, Tailwind, and code Playground

by tissaya

HTML

<button id='b1'>toggle scroll</button>

<div class='o o1'>
    <div>aaa bbb ccc ddd eee</div>
    <div>aaa bbb ccc ddd eee</div>
</div>

<div class='o o2'>
    <div>aaa bbb ccc ddd eee</div>
    <div>aaa bbb ccc ddd eee</div>
    <div>aaa bbb ccc ddd eee</div>
    <div>aaa bbb ccc ddd eee</div>
</div>

CSS

.o {
  position: absolute;
  border: 1px solid blue;
  max-height: 50px;
  padding: 5px;
  z-index: 1;
  overflow-y: auto;
}

.hiddenScroll {
  overflow-y: hidden;
}

.o1 {
    top: 40px;
}

.o2 {
  top: 100px;
}

JavaScript

$('#b1').click(function() { $('.o2').toggleClass('hiddenScroll'); });