Turn off all pointer events on the overlaying div but keep scrolling enabled

Question

Turn off all pointer events on the overlaying div but keep scrolling enabled

Issue:

I am facing a problem with two containers that have overflowing text content like this: https://i.sstatic.net/wsasV.png

In this setup, the blue <div>s have overflow:hidden applied. Now, I am trying to synchronize the scrolling behavior of these divs in a customized manner, regardless of where I scroll within the white container <div>. My idea is to create a transparent, absolutely positioned <div> directly inside the white container and allow it to have overflowing children:

https://i.sstatic.net/06k1a.png

The blue container in this setup has a higher z-index compared to the original two text containers:

.container {
  width: 100vw;
  height: 100vh;
  z-index: 10;
  position: absolute;
  overflow-y: scroll;
}

This leads to a final visual result like this:

https://i.sstatic.net/32jK5.png

My aim is to be able to scroll the overlay container while still capturing other mouse events (like text selection) in the underlying elements.

What I am trying to achieve is similar to Perforce P4Merge's diff tool, where they have a single vertical scrollbar for two code blocks, allowing scrolling based on the content discrepancy between the two blocks.

Concern:

Considering the limitation that we cannot selectively disable pointer events using the CSS property pointer-events, is there an alternative method to enable only the scroll event of the overlaying element while redirecting other pointer events to the underlying elements?

Insight:

In the original implementation written in React, I noticed that there was no need for margin-left: -18px; on the scrollable-container to display the scrollbar, which is intriguing. Additionally, here is a Codepen snippet for reference: codepen snippet

javascript html css

Answer 1

Answer №1

If you happen to come across this old question and are in need of a similar solution, here is what I discovered. I implemented a java script event listener to temporarily disable pointer-events on mousedown and then re-enable the pointer event on mouse up for its parent element.

function addlistener() {
  var scrollable = document.getElementsByClassName("scrollable-container")[0];
  scrollable.addEventListener('mousedown', function() {
    this.style.pointerEvents = "none";
    document.elementFromPoint(event.clientX, event.clientY).click();
  }, false);

  document.getElementsByClassName("app")[0].addEventListener('mouseup', function(e) {
    scrollable.style.pointerEvents = "all";
  }, false);
}

body {
  overflow-y: hidden;
}

.app {
  overflow-y: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  z-index: 0;
}

.scrollable-container {
  width: 100vw;
  height: 100vh;
  margin-left: -18px;
  position: absolute;
  overflow-y: scroll;
  z-index: 10;
}

.scrollable-content {
  width: 500px;
  height: 1600px;
}

.non-scrollable-container {
  flex: 1;
  height: 100vh;
  overflow-y: hidden;
}

.bridge {
  width: 40px;
  background: linear-gradient(white, black);
  cursor: ew-resize;
  height: 100vh;
}

#original {
  background: linear-gradient(red, yellow);
  height: 2100px;
}

#modified {
  background: linear-gradient(blue, green);
  height: 1600px;
}

<body onload="addlistener()">
  <div class="app">
    <div class="scrollable-container">
      <div class="scrollable-content"></div>
    </div>
    <div class="non-scrollable-container">
      <div id="original" class="codeBlock">
        Content I want to select
      </div>
    </div>
    <div class="bridge"></div>
    <div class="non-scrollable-container">
      <div id="modified" class="codeBlock">
        Content I want to select
      </div>
    </div>
  </div>
</body>

Answer 2

If you happen to come across this old question and are in need of a similar solution, here is what I discovered. I implemented a java script event listener to temporarily disable pointer-events on mousedown and then re-enable the pointer event on mouse up for its parent element.

function addlistener() {
  var scrollable = document.getElementsByClassName("scrollable-container")[0];
  scrollable.addEventListener('mousedown', function() {
    this.style.pointerEvents = "none";
    document.elementFromPoint(event.clientX, event.clientY).click();
  }, false);

  document.getElementsByClassName("app")[0].addEventListener('mouseup', function(e) {
    scrollable.style.pointerEvents = "all";
  }, false);
}

body {
  overflow-y: hidden;
}

.app {
  overflow-y: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  z-index: 0;
}

.scrollable-container {
  width: 100vw;
  height: 100vh;
  margin-left: -18px;
  position: absolute;
  overflow-y: scroll;
  z-index: 10;
}

.scrollable-content {
  width: 500px;
  height: 1600px;
}

.non-scrollable-container {
  flex: 1;
  height: 100vh;
  overflow-y: hidden;
}

.bridge {
  width: 40px;
  background: linear-gradient(white, black);
  cursor: ew-resize;
  height: 100vh;
}

#original {
  background: linear-gradient(red, yellow);
  height: 2100px;
}

#modified {
  background: linear-gradient(blue, green);
  height: 1600px;
}

<body onload="addlistener()">
  <div class="app">
    <div class="scrollable-container">
      <div class="scrollable-content"></div>
    </div>
    <div class="non-scrollable-container">
      <div id="original" class="codeBlock">
        Content I want to select
      </div>
    </div>
    <div class="bridge"></div>
    <div class="non-scrollable-container">
      <div id="modified" class="codeBlock">
        Content I want to select
      </div>
    </div>
  </div>
</body>

Answer 3

Answer №2

After spending a few days researching, it appears that achieving my desired outcome in the current manner is not feasible. There doesn't seem to be a way to selectively disable pointer events, and I haven't found a workaround.

Instead, I have devised an alternative solution by implementing a custom "fake" scrollbar. This scrollbar implementation listens to the container's `wheel` event and synchronizes the scroll positions of child containers. I'll keep this question open without accepting an answer, in case a better solution is suggested.

For those interested, you can view my solution below. Note: For an improved experience, select Full Page view.

let appStyles = {
original: {
background: 'linear-gradient(red, yellow)',
height: '1600px',
},
modified: {
background: 'linear-gradient(blue, green)',
height: '2100px',
},
};

// More code goes here...

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

body {
  margin: 0;
overflow-y: hidden;
}

.app {
  display: flex;
  flex-direction: row;
}

.code {
  margin: 0;
}

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root">
  
</div>

Answer 4

After spending a few days researching, it appears that achieving my desired outcome in the current manner is not feasible. There doesn't seem to be a way to selectively disable pointer events, and I haven't found a workaround.

Instead, I have devised an alternative solution by implementing a custom "fake" scrollbar. This scrollbar implementation listens to the container's `wheel` event and synchronizes the scroll positions of child containers. I'll keep this question open without accepting an answer, in case a better solution is suggested.

For those interested, you can view my solution below. Note: For an improved experience, select Full Page view.

let appStyles = {
original: {
background: 'linear-gradient(red, yellow)',
height: '1600px',
},
modified: {
background: 'linear-gradient(blue, green)',
height: '2100px',
},
};

// More code goes here...

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

body {
  margin: 0;
overflow-y: hidden;
}

.app {
  display: flex;
  flex-direction: row;
}

.code {
  margin: 0;
}

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root">
  
</div>

Turn off all pointer events on the overlaying div but keep scrolling enabled

Answer №1

Answer №2

Similar questions

Selecting a main node using the key value

Showing JSON information in an Angular application

"Upgrade your uploading experience with Fine Uploader 3.0 to easily customize PHP filenames post-upload

Queueing up file downloads through a web browser

Transfer the value of a variable within the local scope to the dragstart event handler during the dynamic generation of an input element

Begin the process of setting up PDF.js on the website

Transform a file object into a regular object within React

Properly maintaining child processes created with child_process.spawn() in node.js

The custom stylesheet added to index.html is not taking precedence over the Bootstrap 5 styles applied through NPM

What is the reason behind the failure of the cancel test?

Comparing the use of jQuery's data() method versus directly accessing attributes with native JavaScript using get

Tips for transforming promise function into rxjs Observables in Angular 10

Placing a point on a measurement scale according to a changing factor

Switching from PHP to JavaScript before returning to PHP to establish and manage sessions

How does [name] compare to [attr.name]?

When the FLASK button is triggered, retrieve data from the FLASK and display it

Utilizing HTML5 history instead of hash URLs to preserve the user's browsing history

What is the most effective method for testing event emitters?

Utilizing v-model dynamically to showcase the outcomes of a specific property within a v-for iteration

What is the best way to resize an image to fit its surroundings within a nested box?