根据窗口大小浏览器动态设置div位置

Question

我试图根据窗口浏览器的大小设置div元素的位置。 我需要给div负的左边距以使其不在屏幕上。 我可以简单地做mydiv {left: -900 px;}但这不是动态的，并且依赖于断点将不起作用。 我对javascript的尝试是这样的。 我知道代码不是很干净，但是我正在尝试使其工作，然后进行一些重构。

 <script>

   function getPosition(element) {
     var xPosition = 0;
     var yPosition = 0;

     while(element) {
       xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
       yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
       element = element.offsetParent;
     }
     return { x: xPosition, y: yPosition };
   };

   var addEvent = function(elem, type, eventHandle) {
     if (elem == null || typeof(elem) == 'undefined') return;
     if ( elem.addEventListener ) {
       elem.addEventListener( type, eventHandle, false );
     } else if ( elem.attachEvent ) {
         elem.attachEvent( "on" + type, eventHandle );
     } else {
         elem["on"+type]=eventHandle;
     }
   };

   function moveFiltersOffScreen() {
     var width = window.innerWidth;
     var asideFilters = document.getElementsByClassName("inner");
     console.log(width);
     var offset = width - width * 2;
     console.log(offset);
     asideFilters[0].style["left"] = " offset + 'px'";
     var position = getPosition(asideFilters[0]);
     console.log(position);
   }


  addEvent(window, "resize", moveFiltersOffScreen);

  document.addEventListener("DOMContentLoaded", function() {
    var asideFilters = document.getElementsByClassName("inner");
    var listItems = document.getElementsByTagName("body");
    console.log(listItems);
    var touchControl = new Hammer(listItems[0]);
    console.log(touchControl);
    touchControl.on("panright", function(event) {
      var element = document.getElementsByClassName("inner");
      var elementResults = document.getElementsByClassName("inner-results");
      element[0].style["transform"] = "translate3d(850px, 0px, 0px)";
      element[0].style["-webkit-transform"] = "translate3d(850px, 0px, 0px)";
      element[0].style["-moz-transform"] = "translate3d(850px, 0px, 0px)";
      element[0].style["-ms-transform"] = "translate3d(850px, 0px, 0px)";
      element[0].style["-o-transform"] = "translate3d(850px, 0px, 0px)";
      element[0].style["-webkit-transition"] = "all .5s ease-out"; 
      element[0].style["-moz-transition"] = "all .5s ease-out"; 
      element[0].style["-ms-transition"] = "all .5s ease-out"; 
      element[0].style["-o-transition"] = "all .5s ease-out";
      element[0].style["transition"] = "all .5s ease-out";
      var element = document.getElementsByClassName("inner");
      var position = getPosition(element[0]);
      console.log(position);
      // elementResults[0].style["display"] = "none";           
    });
  });

和HTML代码将是这样的

<div clas="row outer">
  <div class="inner">
    <div class="large-3 columns">
    </div>
  </div>
  <div class="another-inner">
    <div class="large-9">
    </div>
  </div>
</div>

Answer 1

一种基于窗口大小使用纯CSS偏移元素的方法是使用视口宽度（vw）单位，其中1个单位代表视口（通常是窗口）的1％，因此100vw始终是窗口的整个宽度。

http://caniuse.com/#feat=viewport-units

#offscreen{
  left: -100vw;
}