On No Problem

Record some problems encountered in the project, access address

Problem description

If the Mac has a trackpad like the one shown below, your two fingers can scroll not only left and right, but also forward and backward when browsing a page in the browser

This can easily lead to “touch errors”, such as an edit form (wide enough to scroll left and right), where I fill in a lot of content, scroll left and right in a form, return to the previous page, and I fill in a lot of things on the page will be lost… It’s gonna break my back.

The problem is shown as follows:

Problem analysis

Why is the return event triggered?

In fact, the trigger return event has a boundary, which I have also come to the conclusion of my own practice. This boundary trigger is what happens when you scroll past the horizontal boundary of the scroll area. I refer to this as the browser’s scroll overflow behavior (I think it’s easy to understand), which means that normal scrolling doesn’t happen

So can we do something special on this boundary?

Solution 1 (Escape the problem)

Turn off the Settings above, but as a developer, you should know that this is “solving your own problems”, not “solving your users’ problems”, and is not a viable solution

Solution two — open a new page

You can open a new page, such as target=”_blank”, so that there is no previous page to return to

But this makes us lose a lot of the meaning of a single page, such as the slow loading of the page. The product may not agree to do this either, which is not a good solution

Solution three — JavaScript blocks events

The event preventDefault() is the only event that should be allowed to occur if the scroll is “beyond” the horizontal edge of the scroll area, so simply listen for the mouseWheel event and call event.preventDefault() to prevent the return event

const element = document.getElementsByClassName('container') [0];
  element.addEventListener('mousewheel'.function(event) {
  // Scroll to the maximum width on the right
  var maxX = this.scrollWidth - this.offsetWidth;

  // If the event appears to scroll beyond the element's boundaries, block it
  // One scroll to the left and one scroll to the right
  if (this.scrollLeft + event.deltaX < 0 || 
    this.scrollLeft + event.deltaX > maxX) {
    // Block eventsevent.preventDefault(); }},false);
Copy the code

Solution 4 — overscroll behavior-x

Set the CSS overscroll behavior-x to None or contain any of the following folders

/* Set the container */
.container {
  overscroll-behavior-x: none;
}
Copy the code

See the definition in MDN

The overscrollbehavior-x CSS property controls browser behavior when scrolling to the horizontal edge of an area.

None indicates that adjacent scroll areas do not have continuous scrolling and that default scroll overflow is prevented.

Contain default scrolling behavior will be detected by internal elements (e.g., “bounce” or refresh), but adjacent areas will not contain continuous scrolling (e.g., elements below will not be contained).

Here’s an example — Demo address that, by default, triggers the entire page to scroll when the inner container scrolls to the bottom. If you don’t want the whole page to scroll, you can set overscroll behavior-x: contain; In the inner box

On the downside, browser compatibility isn’t ideal, but it’s good enough for our TOB project

Other: touch – action

This program is based on the development of mobile terminal, actually with this talk or a little different, here is a simple record

Touch-action in MDN is explained as follows

The CSS attribute touch-Action sets how the touch screen user manipulates the area of the element (for example, the browser’s built-in zoom function).

By default, panning (scrolling) and zooming gestures are handled exclusively by the browser. Set None to do nothing when a touch event occurs on an element.

summary

In Mac, scrolling left and right causes scrolling to return because scrolling “exceeds” the horizontal boundary of the scrolling area. You can use JavaScript to prevent events in boundary conditions or control scrolling behavior using CSS overscroll-x

The last

This is the first article of “No Problem”. If you have any shortcomings, please correct them.

This is a personal new try, if you like, welcome to like. It will be updated later

reference

  • overscroll-behavior
  • Stop chrome back/forward two finger swipe