Блог

Я начинающий уровень Vue.js разработчик.

Я нашел некоторый код для сдвига меню влево (по горизонтали), как показано ниже. (Когда ширина тега DIV больше ширины устройства, вы можете сдвинуть его влево, чтобы увидеть больше.) Он отлично работает только за исключением Android Chrome (ничего не движется …).

скриншот сайта Кто-нибудь знает, как исправить эту проблему? Пожалуйста, помогите.

мой код выглядит следующим образом

     <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,0,0,.25); 
  line-height: 35px;
}

.roomNavInnerDiv.highlight { 
  background-color: rgb(85, 31, 255);
  color: white;
}