Question

我正在尝试根据窗口浏览器大小设置div元素的位置。我需要的是给div一个负的左边距离屏幕。我可以简单地做public function search($params) { ... $dataProvider = new ActiveDataProvider([ 'query' => $query, 'sort'=> ['defaultOrder' => ['start_date' => SORT_DESC]] ]); .... }，但这不会是动态的，并且根据断点不起作用。我用javascript的尝试是这样的。我知道代码不是很干净，但我试图让它工作然后重构一点。

mydiv {left: -900 px;}

html代码就是这样的

 <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";           
    });
  });

Answer 1

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

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

#offscreen{
  left: -100vw;
}

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

1 个答案: