Scroll a div when focused on an internal div

Question

I need to make a scrollable div, scroll even if the mouse is upon the content (inside the scrollable div), and not just beside it (Where it is blank). This is what I have so far:

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;

main.parentNode.parentNode.onscroll = function() {
   main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}

In Chrome is ok In IE8+ is ok (i know a hack) In Safari the content shakes a lot when i scroll, can i fix that? (I want fix this)

Working fiddle -> https://jsfiddle.net/8oj0sge4/6/

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;

main.parentNode.parentNode.onscroll = function() {
  main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}

#wrapper {
  width: 100%;
  height: 1500px;
  border: 1px solid red;
  padding-top: 380px;
}
#wrapper .container {
  border: 1px solid green;
  width: 100%;
  height: 500px;
  overflow: scroll;
}
#wrapper .container-scroll {
  height: 1500px;
  width: 100%;
  border: 1px solid yellow;
  position: relative;
}
#wrapper .main {
  width: 200px;
  height: 500px;
  background: black;
  overflow: scroll;
  position: absolute;
  color: white;
  left: 50%;
  margin-left: -100px;
  margin-top: 10px;
}

<div id="wrapper">
  <div class="container">
    <div class="container-scroll">
      <div id="main-site" class="main">
        My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
      </div>
    </div>
  </div>
</div>

Thank you guys.

Don't you think its better if you place (main-site) inisde the (container) so you have the freedom to scroll inside (container-scroll) -- demo https://jsfiddle.net/17nbtg7q/ — Tasos, Apr 16 '15 at 23:01
In the fiddle it says *when the mouse is hover this div in safari* but I'm assuming it's about an adaptation for touch. If that is the case, see if this does the trick (or something similar, can't test myself) : https://jsfiddle.net/awLk2x8w/. — Shikkediel, Apr 23 '15 at 19:01
If you want the whole page scroll even while hovering scrollable containers, how are users supposed to actually scroll inside the scrollable containers? — Hubert Grzeskowiak, Apr 27 '15 at 09:11

score 6 · Answer 1 · answered Apr 27 '15 at 02:38

I hope this demo helps you out to make the div content scroll when mouse hover and when mouse out of the div.

<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>

<script>
function loadpage()
{ document.getElementById('marquee1').stop();  }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>

</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()"     onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This     is my test content This is my test content This is my test content This is my     test 

content This is my test content This is my test content This is my test     content This is my test content This is my test content This is my test content     This is my test content This is my test content This is my test content 
</marquee>
</body>
</html>

anu g prem · Answer 2 · 2015-04-28T06:59:05.173

3

you just add this js file to get a smooth scrolling effect.

https://github.com/nathco/jQuery.scrollSpeed

live deomo

http://code.nath.co/scrollSpeed

edited Apr 28 '15 at 06:59

answered Apr 22 '15 at 09:33

anu g prem

545
5
15

score 2 · Answer 3 · edited May 23 '17 at 12:26

2

Not 100% sure what you are up to but you can get the fixed position with css "fixed". It will stay where you put it. The following css fixes to the bottom of the page.

.fixed {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: auto;
}

There is already an answer on scroll position: How to get scrollbar position with Javascript?

edited May 23 '17 at 12:26

Community

1
1

answered Apr 16 '15 at 23:08

Mark Bellamy

135
1
10

i'm confused, where should i put this? – Apr 16 '15 at 23:10

score 2 · Answer 4 · answered Apr 23 '15 at 04:42

I don't know important is that content, and by this I mean if it needs to stay selectable.

If not a pretty good solution would be to use #wrapper .main{ pointer-events: none; }, meaning that the content will not get any events from mouse and it would go through it to the next element behind it - in your case the scroll would go dirrectly to #wrapper.

score 2 · Answer 5 · answered Apr 23 '15 at 17:29

2

Safari does this because every browser has its own scrolling. If you have a fixed header on a phone it acts bouncy and if you do this on a PC it acts normal. Explorer scrolls smooth and Chrome scrolls right to the place without a smooth transition.

answered Apr 23 '15 at 17:29

Roy Berris

1,502
1
17
40

score 1 · Answer 6 · edited May 23 '17 at 10:29

The reason why your #main-site is "jiggling" is because the browser keep "repaint" the position of this element.

One Trick to solve this is called Debounce Function, (you may also google it to see other variations.) The basic idea is to delay the scroll event handler to clear out those untriggered callbacks.

In your case, you may do something like this:

main.parentNode.parentNode.onscroll = function(event) {
    debounce(offsetting, 10);
}

function offsetting() {
    main.style.top = Math.min(main.parentNode.parentNode.scrollTop,maxTop) + "px";       
}

function debounce(method, delay) {
    clearTimeout(method._tId);
    method._tId= setTimeout(function(){
        method();
    }, delay);
}

If you keep seeing the jiggling issue, you can simply edit the delay parameter (i.e, change 10 to 50). The downside for that is your #main-site element will be 'cut off the top` for a while, depending on your delay settings.

Lewis · Answer 7 · 2015-04-29T02:35:07.937

1

Since your code works perfectly on Chrome and IE, there might be a bug on scrollHeight or offsetHeight attribute on Safari. I recommend you to use getBoundingClientRect for calculating element position since this method is more reliable and accurate.

var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;

edited Apr 29 '15 at 02:35

answered Apr 27 '15 at 11:29

Lewis

14,132
12
66
87

this will lock the scroll in safari Tresdin – Apr 29 '15 at 00:27
@AmandaFerrari No. It won't. There is a typo on my code that might cause this issue. I've already fixed it. – Lewis Apr 29 '15 at 02:50

Scroll a div when focused on an internal div

7 Answers7