Better-scroll realizes the effect of linking menu and content

1. Basic use

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
  <style>
    *{
      margin: 0;
      padding: 0;
      border: 0;
      outline: none;
      font-family: Arial;
      list-style: none;
      -webkit-font-smoothing: antialiased;
    }
    html, body, #app{
      height: 100%;
    }
    #app{
      padding: 20px 0;
      box-sizing: border-box;
    }
    .wrapper{
      display: flex;
      height: 100%;
      overflow: hidden;
      max-width: 1200px;
      margin: 0 auto;
    }
    .menu{
      width: 100px;
      height: 100%;
      padding-right: 20px;
    }
    .content{
      flex: 1;
      height: 100%;
      overflow: hidden;
      position: relative;
    }
    .menu-item{
      margin-bottom: 10px;
    }
    .menu-item-content{
      width: 100%;
      padding: 7px 0;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 2px;
      color: #333;
      cursor: pointer;
    }
    .active{
      border-color: #409EFF;
      background: #409EFF;
      color: #fff;
    }
    .content-item{
      margin-bottom: 20px;
    }
    .content-item-text{
      border-radius: 2px;
      border: 1px solid #ddd;
    }
    .content-item-text>img{
      width: 100%;
      vertical-align: middle;
    }
  </style>
</head>
<body>
    <div id="app">
      <div class="wrapper">
        <div class="menu">
          <ul>
            <li class="menu-item" v-for="(item, index) in menu" :key="index" @click="handleClick(index)">
              <div class="menu-item-content" :class="{'active': getCurrentIndex() == index}" v-text="item.label"></div>
            </li>
          </ul>
        </div>
        <div class="content" ref="content">
          <ul>
            <li class="content-item" v-for="(item, index) in content" :key="index">
              <div class="content-item-text">
                <img :src="item" alt="">
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/better-scroll"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        contentScroll: null,
        listHeight: [], // Used to store the height of each subbox currentIndex: 0,
        scrollY: 0,
        menu: [
          {
            label: 'Picture 1',
            id: 0,
          },
          {
            label: 'Picture 2',
            id: 1,
          },
          {
            label: 'Picture 3',
            id: 2,
          },
          {
            label: 'Picture 4',
            id: 3,
          },
          {
            label: 'Picture 5',
            id: 4,
          },
        ],
        content: [
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539093143&di=d3d787658bd0b0f21d2459d90b3bd19b&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1735688044%2C4235283864%26fm%3D214%26gp%3D0.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539192878&di=f46b69a4c2db2ba2f07f0fe1cc7af952&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201210%2F04%2F20121004231502_NrBQG.jpeg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539157019&di=122152eaee12d6ea019b2cec2b80e468&imgtype=0&src=http%3A%2F%2Fpic44.nipic.com%2F20140723%2F18505720_094503373000_2.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539175569&di=d33d35a826cc700add7b7bd53f9282c0&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140103%2F10616010_215644481373_2.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539212191&di=ec438ea6559d06cc1a49a27b122e8edf&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201312%2F09%2F20131209151602_evtcw.jpeg',
        ]
      },
      methods: {
        initScroll() {
          const content = this.$refs.content;
          this.contentScroll = new BScroll(content, {
            click: true, // Because betterscroll will prevent click events by default. Here we need to set mouseWheel: true, // Mouse wheel scrolling probeType: 3,
            scrollY: true,
            scrollbar: {
              fade: true, // Whether to display the scroll bar interactive: false, // New in 1.8.0},
            preventDefault: false, // Prevents the browser from selecting by default });
          // Get the scroll value and assign it to scrollY
          this.contentScroll.on('scroll', pos => {
            this.scrollY = Math.abs(Math.round(pos.y));
          });
        },
        getCurrentIndex() {
          for (let i = 0; i < this.listHeight.length; i++) {
            const height = this.listHeight[i];
            const height1 = this.listHeight[i + 1];
            // Solve the problem of menu display when the content is not enough to fit the box height when scrolling to the end. When scrolling to the end, select the last menu // maxScrollY: maximum vertical scroll position if (Math.abs(this.contentScroll.maxScrollY) === Math.abs(this.scrollY)) {
              return this.content.length - 1;
            }
            if (!height1 || (this.scrollY < height1 && this.scrollY >= height)) {
              return i;
            }
          }
        },
        handleClick(index) {
          const content = this.$refs.content;
          const contentList = content.getElementsByClassName('content-item');
          const el = contentList[index];
          // scrollToElement: scroll to the target element this.contentScroll.scrollToElement(el, 300);
        },
        getHeightList() {
          this.listHeight = [];
          let height = 0;
          this.listHeight.push(height);
          const content = this.$refs.content;
          const contentList = content.getElementsByClassName('content-item');
          for (let i = 0; i < contentList.length; i++) {
            const item = contentList[i];
            height += item.clientHeight;
            this.listHeight.push(height);
          }
          this.initScroll();
        }
      },
      mounted() {
        this.$nextTick(function() {
          // Because the image is too large and loads slowly, it is initialized before it is fully loaded, resulting in the inability to scroll, so a timer delay is added here setTimeout(() => {
            this.getHeightList();
          }, 400);
        });
      },
    });
  </script>
</body>
</html>

Due to browser compatibility, the scroll bar style of each browser is different. If you use CSS style to modify it, only some browsers can achieve the effect you want.

Better-scroll simulates the scroll bar. The parent container is set to a fixed height and the overflow:hidden attribute is set to hide the child elements after they exceed the parent container. Better-scroll acts on the parent container and uses the transform:translate attribute to scroll the child elements to the desired location.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Reasons why MySQL queries are slow

>>: Summary of horizontal scrolling website design