再次考驗你的css功底，這樣的橫向平滑滾動效果，只用css就可以實現，想不想來挑戰(zhàn)一下？

看到這個效果同學們腦子里第一個想到的是什么？監(jiān)聽鼠標的滾輪事件嗎？其實也可以實現但是非常的麻煩，因為要做到平滑滾動的話，還要去算這個事件的觸發(fā)頻率以及滾動的距離。

我是渡一子辰老師，今天給大家介紹的是純CSS 實現橫向滾動的原理和步驟，通過具體的代碼示例和深入的技術分析，讓你的技術更上一層樓！

思考

要實現這個效果其實很簡單，只需要換個角度看問題就行了。

我們都知道鼠標滾輪可以控制的是豎向的滾動條，那如果我們把顯示器旋轉 90 度呢？比如下圖這樣：

這樣豎的滾動條是不是就變成橫的了，而且鼠標依然可以控制它。怎么樣？是不是很有趣。

雖然旋轉顯示器是在搞笑，但是這個思維的轉換其實就是這個效果實現的切入點，我們可以用 css 來旋轉元素，達到同樣的效果。

我們今天將這個效果做成一個 vue 的通用組件，組件的名字就叫做 XScroll 吧。先看一下 XScroll 組件的嵌套結構，為什么這樣嵌套看接下來的圖例你就明白了。

<template>
  <div class="container">
    <div class="scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

如上圖所示，通過之前的思考我們知道換個角度看就可以實現效果，那么我們用代碼把想法實現出來就好了。

通過圖 ① 與 ② 我們知道，scroll 其實是豎著的，這樣 scroll 的滾動條我們才可以通過鼠標滾輪控制，然后我們通過 css 將 scroll 旋轉成圖 ① 的樣子，這樣 scroll 的豎向滾動條就變成了橫向的，我們依然可以通過鼠標滾輪來控制。

因為 container 是我們的最外圍的容器，而 scroll 與 container 是一樣大的，但是我們要知道 scroll 最開始是豎著的。也就說，scroll 的寬等于 container 的高，scroll 的高等于 container 的寬。

好了，思路到這里我們已經清楚了，接下來就是用代碼把想法實現出來。

實現

首先我們知道 scroll 的大小是根據 container 的大小來的，所以我們必須知道 container 的大小，這里我們通過之前寫過的一個 Vue 指令來獲取 container 的大小，并且指令可以在 dom 元素的大小改變時獲取最新的尺寸，指令的代碼放在最后。

<template>
  <!-- v-size-ob 指令，可以在 dom 元素改變大小時獲取 dom 元素的尺寸，并且返回尺寸 -->
  <div v-size-ob="handleChange" class="container">
    <div class="scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
const s = reactive({ // 聲明一個響應式數據存儲一下
  w: 0,
  h: 0,
});
function handleChange(size) { // 通過 v-size-ob 指令的返回值獲取 container 的大小
  s.w = size.width;
  s.h = size.height;
}
</script>

<style scoped>
/* 為每一個盒子加上邊框方便查看效果 */
.container {
  outline: 5px solid #ec7270;
  width: 100%;
  height: 100%;
}
.scroll {
  outline: 5px solid #7985ec;
  /* 通過 vue3 的 v-bind 在 style 中獲取值 */
  /* 因為寬高是有單位的，所以利用 calc 乘以 1px 給寬高加上單位 */
  /* scroll 寬等于 container 的高  */
  width: calc(v-bind("s.h") * 1px);
  /* scroll 高等于 container 的寬  */
  height: calc(v-bind("s.w") * 1px);
}
.content {
  outline: 5px solid #f1ac6a;
  height: calc(v-bind("s.h") * 1px);
}
</style>

通過以上代碼我們可以的到上圖中的效果，那么下一步我們就要旋轉一下 content，使其放置于 scroll 中，并且 scroll 要出現滾動條。

.scroll {
  outline: 5px solid #7985ec;
  width: calc(v-bind("s.h") * 1px);
  height: calc(v-bind("s.w") * 1px);
  position: relative;
  overflow: auto;
}
.content {
  outline: 5px solid #f1ac6a;
  height: calc(v-bind("s.h") * 1px);
  position: absolute;
  left: 100%;
  transform-origin: 0 0;
  transform: rotate(90deg);
}

現在我們得到了這樣的效果。

可以說現在我們已經實現了，就差最后一步了，我們將 content 旋轉到 container 里就大功告成了。

按照慣例請看圖。

.scroll {
  outline: 5px solid #7985ec;
  width: calc(v-bind("s.h") * 1px);
  height: calc(v-bind("s.w") * 1px);
  position: relative;
  overflow: auto;
  transform-origin: 0 0;
  transform: translateY(calc(v-bind("s.h") * 1px)) rotate(-90deg);
}

最后我們隱藏滾動條去除邊框就得到了我們所需要的效果啦！

自定義指令代碼

const map = new WeakMap();
const ob = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const handler = map.get(entry.target);
    if (handler) {
      const box = entry.borderBoxSize[0];
      handler({
        width: box.inlineSize,
        height: box.blockSize,
      });
    }
  }
});

export default {
  mounted(el, binding) {
    ob.observe(el);
    map.set(el, binding.value);
  },
  unmounted(el) {
    ob.unobserve(el);
  },
};

總結

整個實現過程非常巧妙地使用了 css，讓我們感受到了 css 的強大和靈活。

當然這只是一個非常小的知識點，因為 CSS 是我們永遠學不會的語音啊。

如果你有什么問題或建議，請在評論區(qū)留言，如果你覺得這篇文章有用，請點贊收藏或分享給你的朋友！文章來源地址http://www.zghlxwxcb.cn/news/detail-663914.html

到了這里，關于什么？CSS 能實現鼠標滾輪的橫向滾動？的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！