“Offer comes, ask friends to take it! I am participating in the 2022 Spring Recruit Punch card campaign. Click here for more details.”

In the project made a picture viewer logic demand, through the mouse can drag and drop image position, the mouse wheel zoom in, but when resizing images appeared on the interaction of overlap, because the div image storage is part of the page, the page itself is the existence of the slider, so when resizing images will also corresponding sliding;

So the problem has to be solved

thinking

The original idea was to use Overflow: Hidden, because the page was constantly shaking as the slider appeared and disappeared as you toggle back and forth

The first thing I thought about was how do I disable scrolling with JS

document.body.onmousewheel = function () {return false; }Copy the code

But it doesn’t work

Function unScroll() {var top = $(document).scrollTop(); $(document).on('scroll.unable',function (e) { $(document).scrollTop(top); Function removeUnScroll() {$(document).unbind("scroll.unable"); }Copy the code

It’s been tried, and it hasn’t worked

It’s back to square one

Decide on Overflow: Hidden

How do I switch styles

By mouse events mouseover and mouseout or mouseEnter and mouseleave

First,mouseoverandmouseenterThe difference between

Mouseover: Events are triggered when the mouse moves over an element or its child, so there is a repeated triggering, bubbling process. The corresponding remove event is mouseout

Mouseenter: When the mouse removes the element itself (any child element that does not contain the element), it triggers an event that does not bubble. The corresponding remove event is mouseleave

Mouseover and MouseEnter are different and similar in two ways:

  1. Whether bubbling is supported

2. Event trigger time

Let’s look at a picture to get a simple intuition of these two things.

The mouseEnter event case:

The event is emitted when the mouse moves from outside the element boundary to within the element boundary. When the mouse is inside the element boundary, the event must be triggered by moving the mouse out of the element boundary and moving it in again.

In other words: MouseOver supports event bubbling, but MouseEnter does not

After some consideration, I chose mouseover and Mouseout

throughmouseoverandmouseout

Add or remove styles dynamically

html

<div class="image-container" :class="{ 'hiddenScroll': hiddenScroll }"> <div class="image-main"> <div id="mainContainer"> <div> <div class="img-wrapper" :style="imgStyle" @mousedown="handleMouseDown" @mouseover="handleMouseOver" @mouseout="handleMouseOut"> <img src=".. /assets/pa.png"/> </div> </div> </div> </div> </div>Copy the code

css

.image-container {
    height: 820px;
    overflow: auto;
 }

.image-container.hiddenScroll  {
    overflow: hidden;
}
Copy the code

How to Resolve jitter

The jitter is caused by the disappearance of the scroll bar, and the width of the disappearance needs additional filling, so as to ensure that the page will not jitter in the naked eye;

So we just need to add an extra padding

.image-container.hiddenScroll { padding-right: 6px; // Padding-right: 6px because the slider width is 6px overflow: hidden; }Copy the code

Note that I’ve customized the slider style, and the padding-right here is 6px because the slider is 6px wide

For browsers where Firefox cannot change the width of the scroll bar, additional compatibility considerations are required

Reference: Difference between mouseover and MouseEnter