2

要素を常にウィンドウの右上に配置しようとしています。

問題は、スクロールバーが表示されたときに同じ位置を維持し、スクロールバーのサイズを無視することです。

今の様子：

ここに画像の説明を入力してください

どのように見せたいですか：

ここに画像の説明を入力してください

.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;   
}

</ p>

フィドル： http： //jsfiddle.net/L5YhF/

それを修正する方法はありますか？

ありがとうございました。

4

1 に答える 1

2

あなたの正しい属性を作ってみてください：

right: 10px;

または必要なオフセット。

編集 ：

この質問への回答によると、ブラウザーのスクロールバーのサイズを取得するにはどうすればよいですか? クロスブラウザで好きなようにアイコンを配置するJavaScript関数を書くことができます。このフィドルの例:

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

コード：

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";
};
于 2012-12-29T11:57:59.397 に答える