Fixed positioned element in overflow:scroll

Question

I'm trying to make an element be always in top-right side of the window.

The problem is that when scrollbar appears, it keeps same position and ignores size of scrollbar.

How it looks now:

enter image description here

How I'd like it to look:

enter image description here

.outer {
    position: relative;
    height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}
.icon {
    position: fixed;
    right: 0;
    top: 0;
    background: red;
    width: 10px; height: 10px;   
}

The fiddle: http://jsfiddle.net/L5YhF/

Are there any hacks how to fix it?

Thank you.

You could change overflow-y to scroll, like this you'll always get a scrollbar and you can place your fixed element. — axel.michel, Dec 29 '12 at 11:58
The problem is that I don't know height of content and will scrollbar appear or not, and size of it can be found only via JS. — Marvin3, Dec 29 '12 at 12:33
@tMagwell Please loot at my answer, i provided a way with javascript function using which you can find out scrollbar size and alter style dynamically. — rock-ass, Dec 29 '12 at 19:22

score 2 · Accepted Answer · edited May 23 '17 at 12:27

Try making your right attribute:

right: 10px;

or whatever offset you need.

EDIT :

According to aswer to this this question How can I get the browser's scrollbar sizes? you can write a javascript function to put place your icon the way you want in a cross-browser manner. Example in this fiddle:

http://jsfiddle.net/L5YhF/9/

Code:

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);
  return (w1 - w2);
};

window.onload = function() {
    var scrollWidth = getScrollBarWidth ();
    var ico = document.getElementById('ico');
    ico.style.right = scrollWidth + "px";
};

Fixed positioned element in overflow:scroll

1 Answers1