Question

我在盒子里面做了一个水平滚动条。它在大屏幕上工作正常。但是对于移动屏幕，滚动条不在所需的位置

Scroll bar in laptop view 在笔记本电脑视图中，它的工作正常

这是我的编码：

＆＃13;

.scrollbar {
     margin-left: 0px;
    float: left;
    height: 145px;
    width: 96%;
    //background: #fff;
	//overflow-y: hidden;
    overflow-x: scroll;
   
}

.scrollbar-anim::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5; }

.scrollbar-anim::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: orange; }

 .info-box-icon
 {
 width:130px;
 height:150px;
 padding-top:18px;
 }
 .info-box-content
 {
 width: 93%;
 height: 150px;
 }

＆＃13;

<section class="content">

		<div class="row">
			<div class="col-md-10 col-lg-10 col-md-offset-1">
				<div class="box box-primary">
					<div class="box-header with-border">
						<h3 class="box-title">Building Block</h3>
					</div>
					<div class="box-body">		  
						<div class="col-md-12 col-sm-6 col-xs-12">
							<div class="info-box">
								<button class="info-box-icon  bg-orange"><i class="fa fa-building fa-2x"></i></button>
									
								<div class="info-box-content">
									<div class=" scrollbar scrollbar-anim">
										testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
			</div>
       </div> 

    </section>

＆＃13;

Answer 1

.info-box-content{
   width: 30%; //use proper width if using bootstrap then use according grid layout
  height: auto; //leave it or can put some value
   overflow-x: scroll;
 }

默认情况下，div没有高度或宽度。所以，首先添加一些高度和宽度。然后你需要添加一些内容（文本/其他元素等）来检查功能。更像是如果你没有提到围栏区域，当有跨越（溢出）围栏/边界时，怎么会有人知道。

将水平滚动条固定在方框

1 个答案: