代码之家 › 专栏 › 技术社区 › Stark

如何根据所选分区的新位置水平居中?

vue.js javascript

Stark · 技术社区 · 6 年前

我有一个DIV,以可点击的按钮样式保存所有12个月。

我要完成的是,我选择的每个月,无论是在当前所选月份之前还是之前单击一个月,该月份的DIV都应移动到水平居中,并且父容器的overflow-x设置为auto,因此父容器应将按钮滚动到view中。

但是,我只知道我需要得到月份(我刚选择的分区)偏移位置,并且我必须根据子分区更改父分区的滚动位置,这就是我必须继续的。

我创建了一个 jsFiddle 我正试图解决的确切问题。

&13;

new Vue({
  el: "#app",
  data: {
    months: ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'],
    selected_month: 0,
  },
  methods: {
    select_month(event, key){
      this.selected_month = key;
      
      console.log(event);
      
      // parent - month-tracker__choice
			var parent = event.target.parentElement;
      
      // selected div
      var child = event.target;
      
      parent.scrollLeft = parent.scrollWidth - child.offsetWidth;
      //parent.scrollRight = parent.scrollWidth + child.offsetWidth;
    }
  }
})

和13;

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  box-sizing: border-box;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 0 10px;
  transition: all 0.2s;
}

body {
  width: 400px;
}

.month-tracker__month-container {
  overflow: hidden;
  height: 62px;
}

.month-tracker__month-choice {
  overflow-y: hidden;
  display: flex;
  flex-wrap: nowrap;
  padding: 10px 0;
  overflow-x: auto;
  height: 74px;
}

.month-tracker__month-picker:first-child {
  margin-left: 0;
}

.month-tracker__month-picker:last-child {
  margin-right: 0;
}

.month-tracker__month-picker {
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 20px;
  color: #858585;
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
  margin: 0 20px;
  min-width: 160px;
  text-align: center;
  cursor: pointer;
  width: 160px;
  height: 21px;
}

.month-tracker__month-selected {
  background-color: #3e76ff;
  color: #fff;
  transition: all .3s;
  box-shadow: 0 2px 14px 0 rgba(154, 154, 154, 0.19);
}

和13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="month-tracker__month-container">
    <div class="month-tracker__month-choice">
      <div v-for="month, key in months" v-text="month" @click="select_month($event, key)" :class="{ 'month-tracker__month-selected': selected_month == key }" class="month-tracker__month-picker"></div>
    </div>
  </div>
</div>

和13;

>13;

2 回复 | 直到 6 年前

atiqorin 6 年前

更换

parent.scrollLeft = parent.scrollWidth - child.offsetWidth;

< /P>

parent.scrollLeft = child.offsetWidth * key;

ScrollLeft从左端开始。现有代码正在做的是从右边设置。

更新:

parent.scrollLeft = (child.offsetWidth + 40) * key - 70;

这对于所提供的JSfiddle更准确。这里40是CSS上提供的总利润。70是月份选择器宽度的一半减去总填充的一半

saibbyweb 6 年前

你可以试试这个:

parent.scrollLeft = child.offsetLeft - (child.offsetWidth / 2);

下面的工作演示:

&13;

new Vue({
  el: "#app",
  data: {
    months: ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'],
    selected_month: 0,
  },
  methods: {
    select_month(event, key){
      this.selected_month = key;
      
     // console.log(event);
      
      // parent - month-tracker__choice
			var parent = event.target.parentElement;
      
      // selected div
      var child = event.target;
      
      /**** this is what you need ****/
      parent.scrollLeft = child.offsetLeft - (child.offsetWidth/2);
      
    }
  }
})

和13;

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  box-sizing: border-box;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 0 10px;
  transition: all 0.2s;
}

body {
  width: 400px;
}

.month-tracker__month-container {
  overflow: hidden;
  height: 62px;
}

.month-tracker__month-choice {
  overflow-y: hidden;
  display: flex;
  flex-wrap: nowrap;
  padding: 10px 0;
  overflow-x: auto;
  height: 74px;
}

.month-tracker__month-picker:first-child {
  margin-left: 0;
}

.month-tracker__month-picker:last-child {
  margin-right: 0;
}

.month-tracker__month-picker {
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 20px;
  color: #858585;
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
  margin: 0 20px;
  min-width: 160px;
  text-align: center;
  cursor: pointer;
  width: 160px;
  height: 21px;
}

.month-tracker__month-selected {
  background-color: #3e76ff;
  color: #fff;
  transition: all .3s;
  box-shadow: 0 2px 14px 0 rgba(154, 154, 154, 0.19);
}

和13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="month-tracker__month-container">
    <div class="month-tracker__month-choice">
      <div v-for="month, key in months" v-text="month" @click="select_month($event, key)" :class="{ 'month-tracker__month-selected': selected_month == key }" class="month-tracker__month-picker"></div>
    </div>
  </div>
</div>

和13;

>13;