时间戳

首页 > 解决方案 > 打开开发人员工具时引导垂直滚动条消失

bootstrap-4 - 打开开发人员工具时引导垂直滚动条消失

问题描述

当我打开我的网页时。它显示垂直滚动条。但是当我正在调整我的窗口大小或打开 chrome 开发人员工具时。它消失了。我正在使用 overflow-y:auto 。出于测试原因，我将其值更改为滚动。但问题仍然一致。我再次将其还原。请看下面的图片：第一次打开时：

带滚动条

打开开发者工具时：

缺少滚动条

这里也是一个JS-Fiddle

.product-content1 {
    background: url("img/circles-light.png");
    background-repeat: repeat;
    padding: 40px 15px;
}
 #videoThumbnails {
	float:left;
	height: 515px;
    width:120px;
	overflow-y: auto;
}
#videoThumbnails .thumb {
		//padding:0px;
		padding:11px 8px;
		cursor: pointer;
	}
#videoThumbnails img {
		border: 1px solid #DDD;
		cursor: pointer;
        width:90px; 
        height:60px;
	}
#videoThumbnails .frame {
		float: left;
		padding: 2px;
		border: 1px solid #CCC;
	}
.video {
		display: none;
	}
<div class="product-content1 mb-3">
 <div class="container">
	 <div class="row">
		 <div id="videoThumbnails" class=" col-md-2">
			<div class="thumb">
				<div class="frame" data-thumbnail="1"><img src="img/an_image.jpg" /></div>                    
			</div>
			<div class="thumb">
				<div class="frame" data-thumbnail="2"><img src="img/header2.jpg" /></div>                                         
			</div>
			<div class="thumb">
				<div class="frame" data-thumbnail="3"><img src="img/header3.jpg" /></div>                   
			</div>
			<div class="thumb">
				<div class="frame" data-thumbnail="4"><img src="img/header4.jpg" /></div>    
			</div>
			<div class="thumb">
				<div class="frame" data-thumbnail="5"><img src="img/header5.jpg" data-video="" /></div>    
			</div>
			<div class="thumb">
				<div class="frame" data-thumbnail="6"><img src="img/header6.jpg" /></div>    
			</div>
			<div class="thumb">
				<div class="frame" data-thumbnail="3"><img src="img/header3.jpg" /></div>                   
			</div>
			<div class="thumb">
				<div class="frame" data-thumbnail="4"><img src="img/header4.jpg" /></div>    
			</div>
			<div class="thumb">
				<div class="frame" data-thumbnail="5"><img src="img/header5.jpg" data-video="" /></div>    
			</div>
			<div class="thumb">
				<div class="frame" data-thumbnail="6"><img src="img/header6.jpg" /></div>    
			</div>         
		</div>
		<div class="col-sm-10 col-md-10">        
			
			<img id="largeImage" src="img/an_image.jpg" width="100%" height="515"/>
		</div>
	</div>
</div>
</div>

标签： bootstrap-4

解决方案

推荐阅读