javascript - fixed 左右移动问题？

Question

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

  <p class="over-right">
                    <ul class="content-right">
                        <p class="title_scroll">
                            <p class="data_title">
                                <li>最新</li>
                                <li>涨幅</li>
                                <li>最高</li>
                                <li>最低</li>
                                <li>总手</li>
                                <li>总额</li> 
                            </p>
                        </p>
                        <p class="data_content"  v-for="value in newdata" >
                            <li> {{ value.newbest }} </li>                    
                            <li> {{ value.rise }} </li>                    
                            <li> {{ value.height }} </li>                    
                            <li> {{ value.low }} </li>                    
                            <li> {{ value.zongs }} </li>                    
                            <li> {{ value.zonge }} </li>                    
                        </p>
                    </ul>
                </p>
                


.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;
}

Answer 1

谢邀~

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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