新教程:css3手动实现pc端横向滚动

2024年04月16日 14:36:10益点益滴1106

由于容器隐藏横向滚动条后,移动端横向滚动效果不受影响,但是pc端是无法通过鼠标进行横向滚动,因此需要自己手动实现效果。

  • draggable="false",通过设置draggable,是可以设置html不允许拖拽效果,通过拖拽可以初步实现pc端横向滚动行为。
    • draggable的兼容性是最好HTML属性
    • css样式-webkit-user-drag: none;也可以实现类似效果,兼容性不太好,移动效果大部份都有效
  • user-select:属性可以设置是否允许用户选择页面中的图文内容
  • mousedownmouseup:通过设置鼠标事件,实现鼠标按下后,坐标位置不一样,让容器调用scrollTo就可以实现滚动效果。
  • wheel:通过滚动事件,在容器内滚动滚轴可以横向滚动
  • getBoundingClientRect,记录每个图标的x位置,通过前后位置是否变化,如果不变化,鼠标单击的时候就可以触发单击事件。因为mousedown事件发生也会触发click事件
  class Scroller {      init() {          this.setDragWheelEvent(".gameShow");          this.setDragScrollEvent(".gameShow");          this.initClick();      }      throttle(fn, wait) {          let inThrottle, lastFn, lastTime;          return function () {              const context = this, args = arguments;              if (!inThrottle) {                  fn.apply(context, args);                  lastTime = Date.now();                  inThrottle = true;              } else {                  clearTimeout(lastFn);                  lastFn = setTimeout(function () {                      if (Date.now() - lastTime >= wait) {                          fn.apply(context, args);                          lastTime = Date.now();                      }                  }, Math.max(wait - (Date.now() - lastTime), 0));              }          };      }      setDragWheelEvent(selector) {          const gameShowEle = document.querySelector(selector);          gameShowEle.addEventListener("wheel", (event) => {              event.preventDefault();              gameShowEle.scrollLeft += event.deltaY;          });      }      setDragScrollEvent(selector) {          const gameShowEle = document.querySelector(selector);          let left = 0;          let oldLeft = 0;          const move = this.throttle((event) => {              let x = left + (oldLeft - event.clientX)              if (x < 0) x = 0;              gameShowEle.scrollTo(x, 0)          }, 100)          gameShowEle.addEventListener('mousedown', function (event) {              gameShowEle.style.cursor = 'grabbing';              gameShowEle.style.userSelect = 'none';              oldLeft = event.clientX;              left = gameShowEle.scrollLeft;              document.addEventListener('mousemove', move)          });          document.addEventListener('mouseup', function () {              gameShowEle.style.cursor = 'pointer';              gameShowEle.style.removeProperty('user-select');              document.removeEventListener('mousemove', move)          })      }       isMobile() {                      return window.navigator.userAgent.match(                          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|Symbian|Windows Phone)/i                  );       }      initClick() {          const imgSpaceEles = document.querySelectorAll(".imgSpace");          if (imgSpaceEles) {              const xAarry = [];              Array.from(imgSpaceEles).forEach((imgSpaceEle, index) => {                  const href = imgSpaceEle.getAttribute("url");                  let { x } = imgSpaceEle.getBoundingClientRect();                  xAarry.push(x);                  imgSpaceEle.addEventListener("click", () => {                      let { x: newx } = imgSpaceEle.getBoundingClientRect();                      if (xAarry[index] == newx || this.isMobile()) {                         alert(href)                      }                      xAarry.forEach((m, i) => {                          const ele = imgSpaceEles[i];                          const site = ele.getBoundingClientRect();                          xAarry[i] = site.x                      })                  })              })          }      }  }  window.onload = () => {      const scroller = new Scroller()      scroller.init();  }
      <style>          .gameMenu {              overflow: hidden;              margin: 0 auto;              height: 100%;          }            .gameMenu>div {              display: flex;              flex-direction: column;              justify-content: center;              align-content: center;              box-sizing: border-box;              margin: auto;              padding: 10px 10px 0 10px;              border-top-left-radius: 10px;              border-top-right-radius: 10px;              width: 320px;              height: 100%;              background: #fff;          }            .games {              border-radius: 10px;              width: 100%;              height: 90px;              box-shadow: rgb(0 0 0 / 16%) 0 0 10px 0;          }            .navigationStyle {              display: flex;              overflow: hidden;              position: relative;              justify-content: center;              align-items: center;              padding: 0 1px;              width: 100%;              height: 100%;          }            .gameShow {              display: flex;              overflow-x: scroll;              align-items: center;              width: inherit;              height: 90px;              cursor: pointer;          }            .gameShow::-webkit-scrollbar {              display: none;          }            .imgSpace {              margin: 5px;              width: 60px;              height: 60px;          }      </style>      <div class="gameMenu" style="width: 320px">          <div>              <div class="games">                  <div id="navigationStyle" class="navigationStyle">                      <div class="gameShow" draggable="false" style="cursor: pointer;">                          <div class="imgSpace" url="/game/crazy-ball/play" title="crazy-ball">                              <div style="position: relative">                                  <div                                      style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url(&quot;https://res.minigame.vip/gc-assets/crazy-ball/crazy-ball_icon.webp&quot;); background-position: center center; background-repeat: no-repeat; background-size: contain;">                                  </div>                              </div>                          </div>                          <div class="imgSpace" url="/game/mutant-dino/play" title="mutant-dino">                              <div style="position: relative">                                  <div                                      style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url(&quot;https://res.minigame.vip/gc-assets/mutant-dino/mutant-dino_icon.webp&quot;); background-position: center center; background-repeat: no-repeat; background-size: contain;">                                  </div>                              </div>                          </div>                          <div class="imgSpace" url="/game/plants-beatzombies/play" title="plants-beatzombies">                              <div style="position: relative">                                  <div                                      style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url(&quot;https://res.minigame.vip/gc-assets/plants-beatzombies/plants-beatzombies_icon.webp&quot;); background-position: center center; background-repeat: no-repeat; background-size: contain;">                                  </div>                              </div>                          </div>                          <div class="imgSpace" url="/game/queen-hulahoop/play" title="queen-hulahoop">                              <div style="position: relative">                                  <div                                      style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url(&quot;https://res.minigame.vip/gc-assets/queen-hulahoop/queen-hulahoop_icon.webp&quot;); background-position: center center; background-repeat: no-repeat; background-size: contain;">                                  </div>                              </div>                          </div>                          <div class="imgSpace" url="/game/popstone2/play" title="popstone2">                              <div style="position: relative">                                  <div                                      style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url(&quot;https://res.minigame.vip/gc-assets/popstone2/popstone2_icon.webp&quot;); background-position: center center; background-repeat: no-repeat; background-size: contain;">                                  </div>                              </div>                          </div>                          <div class="imgSpace" url="/game/ninja-sword/play" title="ninja-sword">                              <div style="position: relative"></div>                              <div                                  style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url(&quot;https://res.minigame.vip/gc-assets/ninja-sword/ninja-sword_icon.webp&quot;); background-position: center center; background-repeat: no-repeat; background-size: contain;">                              </div>                          </div>                      </div>                  </div>              </div>          </div>      </div>
  • 最终实现的效果,如下图:

新教程:css3手动实现pc端横向滚动都看到这里了,搬砖不易,给小编点个赞呗,以后我会更有动力分享哦~

超赞,真给力!嗯,必须鼓励~

打赏 0
账号:mxy310@163.com[复制]
账号:77940140[复制]