如何解决滑动仅在移动android chrome中不起作用 Vue
我是Vue.js初学者开发人员。
我找到了一些将菜单滑动到左侧(水平)的代码,如下所示。 (当DIV标签宽度大于设备宽度时,可以将其向左滑动以查看更多内容。) 它只能正常工作,除了android chrome(什么都没动...)。
screenshot of site 有人知道如何解决此问题吗?请帮忙。
我的代码如下
<div class="roomNav">
<div class="roomNavInner">
<div v-for="(r,index) in roomList" :key="index">
<div class="roomNavInnerDiv" @click="selected=index" :class="{highlight:selected == index}" v-scroll-to="`#roomType${index}`">{{r[0].roomType}}</div>
</div>
</div>
</div>
.roomNav{
position: fixed;
top: 130px;
height: 62.5px;
width: 100%;
background-color: white;
z-index: 10;
}
.roomNavInner{
position:absolute;
display:block;
top:0;
left:0;
width:62.5px;
max-height: 100vw;
margin:0;
overflow-y:auto;
overflow-x:hidden;
-ms-transform:rotate(-90deg) translateY(-62.5px);
-webkit-transform:rotate(-90deg) translateY(-62.5px);
-o-transform:rotate(-90deg) translateY(-62.5px);
-moz-transform:rotate(-90deg) translateY(-62.5px);
transform:rotate(-90deg) translateY(-62.5px); //
-ms-transform-origin:right top;
-webkit-transform-origin:right top;
-o-transform-origin:right top;
-moz-transform-origin:right top;
transform-origin:right top;
padding:40px 0 150px 0;
}
.roomNavInnerDiv{
display:block;
padding:auto 5px;
-webkit-transform:rotate(90deg) translateY(62.5px);
-ms-transform:rotate(90deg) translateY(62.5px);
-o-transform:rotate(90deg) translateY(62.5px);
-moz-transform:rotate(90deg) translateY(62.5px);
transform:rotate(90deg) translateY(62.5px);
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
-moz-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
width:100px;
height:35px;
margin:80px 13.75px;
color: #4a4a4a;
font-size: 14px;
font-family: 'NotoSansCJKkr-Regular';
border-radius: 18px;
box-shadow: 2px 2px 7px rgba(0,.25);
line-height: 35px;
}
.roomNavInnerDiv.highlight {
background-color: rgb(85,31,255);
color: white;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。