javascript - fixed 左右移动问题？-PHP中文网问答

最新涨幅设置了fixed 不等上下移动，，但是可以和下面的数据一起左右移动，怎么解决额？

  
                    

                        
                            

                                
最新
                                涨幅
                                最高
                                最低
                                总手
                                总额 
                            
                        
                        
                            
 {{ value.newbest }}                     
                             {{ value.rise }}                     
                             {{ value.height }}                     
                             {{ value.low }}                     
                             {{ value.zongs }}                     
                             {{ value.zonge }}                     
                        
                    
                
                


.over-right{
    overflow-x:scroll;
    width: 60% ;
    -webkit-overflow-scrolling:touch;
}
.content-right {
    font-size: 14px;      
}
.data_title {
    width: 300%;
    overflow: hidden;
    display: flex;
    display: -moz-box;  /* Firefox */ 
    display: -ms-flexbox;    /* IE10 */ 
    display: -webkit-box;    /* Safari */  
    display: -webkit-flex;    /* Chrome, WebKit */ 
    display: box;  
    display: flexbox;
    justify-content:space-around;
    border-bottom: 1px solid #e5e5e5;
    line-height: 30px;
    height: 30px;
}
.content-right li{
    text-align: center;
    flex-grow: 1;
}
.data_title li{
    position: relative;
    text-align: center;
    flex-grow: 1;
}
.data_title li:after{
    content:"";
    border-right: 1px solid #e5e5e5;
    position: absolute;
    right: 0;
    height: 20px;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.title_scroll{
    width: 60%;
    overflow: hidden;
    overflow-x:scroll; 
    top: 120px;
    position: fixed;
    z-index: 3;
    background-color: #F4F4F4;
    overflow-x:scroll;
}
   
.bottom-null{
    padding: 24px;
}

.data_content{
    width: 300%;
    overflow: hidden;
    display: flex;
    display: -moz-box;  /* Firefox */ 
    display: -ms-flexbox;    /* IE10 */ 
    display: -webkit-box;    /* Safari */  
    display: -webkit-flex;    /* Chrome, WebKit */ 
    display: box;  
    display: flexbox;
    justify-content: space-around;
    border-bottom: 1px solid #e5e5e5;
    line-height: 53px;
    height: 53px;
}
.data_content li{
    text-align: right;
    width: 100%;
    padding-right: 20px;
}

全部回复(4)

高洛峰2017-04-11 10:07:23 4楼

谢邀~

先占位, 你设置的相关class的样式也粘出来, 首先没太仔细看代码, 简单运行了一下
如楼下所说确实有一些问题, 建议题主再加强一些语义化的知识.

其次, 在布局上有问题, 如果想让标题和内容可以联动, 为什么不放在同一个容器当中呢?
如图:

蓝色为可视区域, 绿色为内容Items容器, 红色为Item列

赞 +0

添加回复

伊谢尔伦2017-04-11 10:07:23 3楼

没看懂你要描述的结果是啥？还有你这个html结构也是怪怪的，为什么不把标题，以及每条数据放到一个单独的li标签里，然后再去细分展示结果！

ringa_lee2017-04-11 10:07:23 2楼

//难道这样不行？
.content-right{
  position: relative;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

大家讲道理2017-04-11 10:07:23 1楼

谢邀。就是width:200%;这样多出来的就是随便滚啊。然后你给中间的内容垂直出现滚动条