无法实现水平滚动条插件

Question

我正在使用颜色样本插件here，该插件定义了自定义Vue元素。

我还遵循this example来实现基于JavaScript的滚动条。

我的.vue文件如下：

<script>元素：

export default {
  name: "ProjectTask",
  data: function() {
     return { } 
 },
 methods:
    .
    .
    .
    .
  ,
  mounted() {
    const rightBtn = document.querySelector('#right-button');
    const leftBtn = document.querySelector('#left-button');

    rightBtn.addEventListener("click", function(event) {
       const conent = document.querySelector('#content');
       conent.scrollLeft += 300;
       event.preventDefault();
    });

    leftBtn.addEventListener("click", function(event) {
      const conent = document.querySelector('#content');
      conent.scrollLeft -= 300;
      event.preventDefault();
    });
  }
}

<templete>元素：

  <div class="leftScroll" >
     <button id="left-button"> swipe left </button>
  </div>  
  <div class="ColorsWraper2 col-lg-8" id="content">
          <swatches v-model="Project.color" :colors="color_picker" shapes="circles" inline></swatches>
  </div>
  <div class="rightScroll">
     <button id="right-button"> swipe right </button>
  </div>

<style>元素：

.ColorsWraper2 {
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
}

插件的组件应该出现在两个按钮之间（向左/向右）。

但是，它对我不起作用！

Answer 1

我假设您的意思是要在按钮之间使色样居中-这是通过使用CSS Flexbox（Can I Use: CSS Flexbox）完成的。

如果您想确切地了解我的工作以及原因，请查看以下步骤。否则，请跳到代码示例部分，在其中我对所做的工作进行简要评论。

---

第1步：激活CSS flexbox

• 我将<template>中的整个滑块包装在div .scroll-slider中。
• 接下来，我将其设置为使用flex display: flex并设置flex-direction: row。
• 此步骤的关键部分是设置align-items: center，该按钮使中间的项目（尤其是按钮）垂直对齐，并防止按钮填充高度。

步骤2：防止颜色样本溢出（和包裹）。

此步骤分为两个部分。

1. 消除外部包装.colors-wrapper上的溢出-这和overflow: hidden;一样简单。您应该在外部包装器上添加边距和填充，因为这将在调整大小时产生更准确的（所需）结果。

2. 防止内部包装.colors-wrapper-inner上的溢出。这是我使用您的方法来消除溢出和包装的地方：

.colors-wrapper-inner {
    white-space: nowrap;
    overflow: hidden;
}

第3步：修复按钮的大小。

• 在这一点上，您可能已经注意到按钮被压扁了-通常看起来很奇怪。幸运的是，简单的解决方法是使用flex-shrink禁用flex-shrink: 0。

---

代码示例

JSFiddle： https://jsfiddle.net/SamJakob/st45o0kb/

StackOverflow代码段：

// This is equvilent to import (using this because JSFiddle doesn't support npm)
Vue.component('swatches', VueSwatches.default);

new Vue({
  name: "ProjectTask",
  el: "#app",
  data() {
    return {
      color: "#1CA085"
    }
  },
  methods: {

    swipeRight: function() {
      const content = document.querySelector('#content');
      content.scrollLeft += 300;
    },

    swipeLeft: function() {
      const content = document.querySelector('#content');
      content.scrollLeft -= 300;
    }

  },
  mounted() {
    const rightBtn = document.querySelector('#right-button');
    const leftBtn = document.querySelector('#left-button');
  }
})

/* General Styles - please ignore */

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

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


/* Wrapper styling */

.scroll-slider {
  /* Step 1: Setup a flexbox in the row-direction. */
  display: flex;
  flex-direction: row;
  /* This aligns the elements in the center
      (and prevents the buttons being full height) */
  align-items: center;
}

.colors-wrapper {
  /* Step 2.1: Make sure the swatches wrapper doesn't show any overflow. */
  overflow: hidden;
  /* An extra touch; add some margin around the color swatches. */
  margin: 0 10px;
}


/* Step 2.2: Make sure the inner swatches wrapper doesn't overflow */

.colors-wrapper-inner {
  white-space: nowrap;
  overflow: hidden;
}


/* Step 3: Make the buttons display at their normal size. */

.scroll-button-wrapper {
  /* This means the buttons won't shrink - which is why this works. */
  flex-shrink: 0;
}

<!-- Imports - please ignore -->
<link href="https://unpkg.com/vue-swatches@1.0.2/dist/vue-swatches.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue-swatches@1.0.2/dist/vue-swatches.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<!-- This would go inside your <template> element. -->
<div id="app">
  <div class="scroll-slider">

    <div class="scroll-button-wrapper">
      <!-- You can use the '@click' property to bind a method to the click event.  -->
      <button class="scroll-button" id="left-button" @click="swipeLeft"> swipe left </button>
    </div>

    <div class="colors-wrapper">

      <div class="colors-wrapper-inner" id="content">
        <swatches v-model="color" shapes="circles" inline></swatches>
      </div>

    </div>

    <div class="scroll-button-wrapper">
      <button class="scroll-button" id="right-button" @click="swipeRight"> swipe right </button>
    </div>

  </div>
</div>