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>

请检查更新的小提琴，进行一些修补可以使您到达那里。

simplebar滚动删除溢出隐藏选项

1 个答案: