How to disable default scrolling in uniapp

In mobile development, we often encounter the need to disable default scrolling. For example, when using uniapp to develop a small program, you may need to prohibit the default scrolling of the page in some scenarios. In this case, we need to use some methods provided by uniapp to achieve this.

First of all, we need to understand that in uniapp, the page supports scrolling by default. Therefore, if we want to disable default scrolling, we need to use some tricks.

Method 1: By setting the style of the outer container

We can disable the default scrolling of the page by setting the style of the outer container. The specific steps are as follows:

1. Set an outer container on the page, such as a div tag.
2. Set styles for the outer container, including overflow:hidden.
3. In the page area where scrolling needs to be disabled, such as a div tag, set the style, overflow-y: scroll;.

Code example:

<template>
  <div class="wrapper">
    <div class="content" style="overflow-y: scroll;">
      <!--此处为需要设置滚动的内容区域-->
    </div>
  </div>
</template>

<style>
  .wrapper {
    overflow: hidden;
  }
</style>

Through the above method, we can achieve the effect of disabling the default scrolling of the page.

Method 2: Implementation through JS code

If the page structure is relatively complex, or scrolling needs to be controlled in certain specific scenarios, we can use JS code to achieve the effect of disabling scrolling.

The specific steps are as follows:

1. Get the page elements that need to be disabled, such as a scrolling container.
2. Bind touchstart, touchmove, touchend events, and prevent default events in the event handling function.

Code example:

<script>
  export default {
    methods: {
      stopScroll() {
        let el = document.querySelector('.content');
        let startY;
        el.addEventListener('touchstart', (e) => {
          startY = e.touches[0].pageY;
        });
        el.addEventListener('touchmove', (e) => {
          let moveY = e.touches[0].pageY - startY;
          if (el.scrollTop === 0 && moveY > 0) {
            e.preventDefault();
          }
          if (el.scrollTop >= el.scrollHeight - el.offsetHeight && moveY < 0) {
            e.preventDefault();
          }
        });
        el.addEventListener(&#39;touchend&#39;, () => {
          startY = 0;
        });
      },
    },
    mounted() {
      this.stopScroll();
    },
  };
</script>

The above code is called in the mounted life cycle. We obtain the container element that needs to be disabled and bind touchStart, touchmove, and touchEnd. event, and handle the sliding of the scroll bar in the event handling function to achieve the effect of prohibiting scrolling.

Summary

Through the above two methods, we can achieve the effect of disabling the default scrolling of the page. The specific implementation method can be selected according to actual project requirements.

Of course, if you use the second method, you also need to pay attention to performance issues, because the touchmove event will be triggered every time you scroll, and the scrollTop and scrollHeight of the element need to be recalculated. Therefore, during use, it is necessary to optimize the code as much as possible to improve performance.

The above is the detailed content of How to disable default scrolling in uniapp. For more information, please follow other related articles on the PHP Chinese website!