There was a problem with scrolling in the application on Electron. There is a page in which the data is displayed line by line. To output a large number of lines, scrolling is implemented:

.main-panel-content { overflow-y: scroll; overflow-x: hidden; height: ~"calc(100vh - @{headerHeight} - @{toolbarHeight})"; margin-left: 6px; box-sizing: border-box; }

All this works fine, but in a certain case it was necessary to display data on this page not in the block for which the above style is applied, but in a smaller block nested in it. Accordingly, it is necessary in this case to somehow cancel scrolling in the parent block and assign it to the child. Are there ways to implement something like this? I hang on a child container style similar to the above - the scrollbar still appears in the parent container. I completely cut off the parent container's scrollbar (although this cannot be done) - no one appears at all.

The HTML structure is in general:

 <div className="main-panel-content»> // на этом блоке скроллинг есть сейчас <div className="page-header main" /> <div className="input-wrapper"> <input onChange={this.onChange} onFocus={this.onFocus} onKeyDown={this.onKeyDown} value={this.state.query} tabIndex={0} /> </div> <div className="search-rslt"> // на этот блок хочу повесить скроллинг … </div> </div>

I would be grateful for any answers.

  • one
    Write the html structure to make it clear. - bla bla213213213
  • Oops, I'm sorry. Added by. - kostyawh

1 answer 1

Well, as an option, you can make such logic that:

If this search-rslt block is search-rslt , then add some class to its parent main-panel-content , say no-scroll .

And now what do we have? We write new css :

 .main-panel-content.no-scroll { overflow-y: auto; }