for example on the front page, you can scroll the page down and edit some node. even if you close the overlay the page is scrolled to top

this is confusing

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

yannickoo’s picture

I thought the hash in the url is the problem but it isn't. I think there is a function in the overlay javascript that ensure that a user cannot scroll the main website. Let us find the evil function!

nod_’s picture

Version: 7.12 » 8.x-dev

It's because when you close the overlay there is a php redirect, can't do much about this.

loominade’s picture

Version: 8.x-dev » 7.x-dev

no, also without redirect, the scroll position gets lost. I have a possible solution. I will work on it

loominade’s picture

Assigned: Unassigned » loominade
nod_’s picture

Version: 7.x-dev » 8.x-dev

I'm sorry but the process is fixing in D8 first and backport to D7 later.

loominade’s picture

this only works in chrome for now because firefox and ie doesn't seem to support negative margins on the body element

loominade’s picture

sorry this patch is D7 based. but the basic idea is instead of only cutting the page at the viewport height, imitate the scroll position by negative positioning of the body element.

current styling:

body {
  height: 100%;
  overflow: hidden;
}

desired styling if the scroll position is 1000px and the viewport has a height of 500px:

body {
  height: 1500px; /* 1000px + 500px */
  overflow: hidden;
  margin-top:-1000px;
}

also we need to save that scroll position somewhere. I did it with bodyElement.data('scrollPosition', window.scrollY);.

on overlay.close, that css needs to be removed and the former scroll postion needs to be restored. I did it with bodyElement.scrollTop(bodyElement.data('scrollPosition'));

loominade’s picture

to make it work in IE & firefox it has to be like this:

body {
  height: 1500px; /* viewportHeight + scrollPosition */
  overflow: hidden;
  position: absolute;
  top:-1000px; /* scrollPosition *-1 */
  width: 100%;
}

#overlay-container {
  top:1000px; /* scrollPosition */
  left:0;
  position: absolute;
  width: 100%;
  height: 100%;
}
loominade’s picture

Status: Needs work » Needs review
FileSize
1.77 KB

Status: Needs review » Needs work

The last submitted patch, overlay-remain_scroll_position-1468902-9.patch, failed testing.

yannickoo’s picture

This also happens when you scroll down, opening an overlay and then closing it. The css in overlay-parent.css is blame:

html.overlay-open,
html.overlay-open body {
  height: 100%;
  overflow: hidden;
}

The browser cannot know the original scroll position when the body height was manipulated.

Anonymous’s picture

the patch overlay-remain_scroll_position-1468902-9.patch failed for me. this is the error I got in my terminal.

patching file overlay-parent.js
Hunk #1 FAILED at 1.
Hunk #2 succeeded at 86 (offset 5 lines).
Hunk #3 succeeded at 202 (offset 5 lines).
Hunk #4 succeeded at 225 (offset 5 lines).
1 out of 4 hunks FAILED -- saving rejects to file overlay-parent.js.rej
prinds’s picture

I have created an experimental module to deal with this problem on 7.x.

http://drupal.org/sandbox/prinds/1918678

My method requires adding two extra events to the overlay module - see patch below.

This allows the module to save the scroll position before the css destroys the page height, and then restore the scroll position after the overlay is fully closed.

Because this method uses the window.name variable as temporary storage, this also works after pressing the save button...

Please have a look at the experimental module.. I think this could easily be built into the overlay module.

Here's the patch I currently have applied to the overlay module, that adds the extra events..
#1918692: Adding on BeforeOpen and on CloseDone events to Overlay

yannickoo’s picture

Title: overlay scrolls page in background to top » Restore scroll position after closing overlay
Assigned: loominade » Unassigned
nod_’s picture

Version: 8.x-dev » 7.x-dev
Issue summary: View changes

Overlay is dead to D8 #2088121: Remove Overlay.

shevgeny’s picture

this does not work for me.