you need to implement a fixed at the top of the page, and the bars
code that can horizontally content is as follows
Click to view the video
< H2 > at present, it is found that it is caused by the overflow of-sharptest-fixed < / H2 >.
when-sharptest-fixed does not write any overflow, elastic drag will not lose the text
but cannot scroll horizontally without writing overflow,
< H2 > ask the bosses what solutions they have < / H2 >
overflow-x<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>Document</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style>
html,body{
height: 2000px;
}
-sharptest-wrap{
width: 100%;
height: 44px;
line-height: 44px;
font-size: 15px;
text-align: center;
color: -sharp0F0;
border-bottom: 1px solid -sharp0F0;
}
-sharptest-flex{
display: flex;
height: 44px;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
border-bottom: 1px solid -sharpF00;
-webkit-overflow-scrolling: touch;
box-sizing: content-box;
/*overflow: hidden;*/
overflow: scroll;
}
.text{
color: -sharp999;
line-height: 44px;
font-size: 15px;
flex: 0 0 auto;
padding: 0 5px;
box-sizing: border-box;
flex-shrink: 0;
}
</style>
<body>
<div id="test-flex">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
<div class="text">4</div>
<div class="text">5</div>
<div class="text">6</div>
<div class="text">7</div>
<div class="text">8</div>
<div class="text">9</div>
<div class="text">10</div>
<div class="text">11</div>
<div class="text">12</div>
<div class="text">13</div>
<div class="text">14</div>
<div class="text">15</div>
</div>
<div id="example">
<p v-for="i in 1000">{{i}}
</div>
</body>
<script>
var app = new Vue({
el:'-sharpexample',
data(){
return{
text:'123'
}
}
});
</script>
</html> didn't test your situation. I think it's a flexible drag pot. When there is transition animation, there will be problems with fixed layout rendering, which can be checked according to this idea.
reference:
http://www.cnblogs.com/skywea.
https://www.zhangxinxu.com/wo.
Previous: Problems of data structure in python
Next: How to quickly get the last selected node of each level by element UI tree tree component