javascript - 无法实现水平滚动条插件

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> 中的整个 slider 包裹起来。 ，在一个 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>