прокрутка simplebar убрать переполнение скрытая опция

Question

Я использую полосу прокрутки из нижнего местоположения.Работает нормально.https://grsmto.github.io/simplebar/

Пожалуйста, смотрите мою скрипку.В моей демонстрации я отобразил список на видео / изображении.Если я нажму на видео или изображение, оно должно быть увеличено.Я был достигнут css.Нажмите на первое изображение, оно должно быть увеличено.Но увеличенное видео или изображение будет скрыто.Я хочу, чтобы изображение или видео были перекрыты с полосой прокрутки и нажмите ниже элемент.Это возможно?http://jsfiddle.net/akn1r638/

$(".viewenlarge").click(function(){
    $(".video").addClass("expand");
});

Answer 1

http://jsfiddle.net/akn1r638/27/

$(".video").click(function(){
     $(this).css("width","250px");
     $(".content").css("margin-top", "20px");
     $(".image").css("margin-top", "20px");
     
});

.demo1 {
  height:  250px;
  width: 250px;
}



.left-panel {
  width: 250px;
  background: #000;
  color: #fff;
}
.video{
  background-image:url('https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/pic_09.jpg');
  
  background-size:contain;
  background-repeat:no-repeat;
  height:200px;
  width:200px;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-panel">

<div class="demo1" data-simplebar>
<div >

						  <h2>Scroll me!</h2>
						  <p class="video viewenlarge"></p>
 <p class="image"><img src= "https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/pic_08.jpg"></p>						  <p class="content">Some more content</p>
						  <p class="odd">Some content</p>
						  <p>Some more content</p>
						  <p class="odd">Some content</p>
						  <p>Some more content</p>
						  <p class="odd">Scroll me!</p>
              hey!
              </div>
						</div>
            </div>

Пожалуйста, проверьте обновленную скрипку, вам нужно немного повозиться.