Форум

galych · #1 (**permalink**) 21.08.2015, 10:52

В других браузерах все гуд(появляются стрелочки вверх и вниз), а вот в IE не работает, хотя консоль не выдает ошибок. подскажите где собака зарыта?

Код:

<!DOCTYPE HTML>
<html>

<head>
  <style>
    body,
    html {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    #matrix {
      width: 400px;
      margin: auto;
      overflow: auto;
      text-align: justify;
    }

    #updown {
      height: 9px;
      width: 14px;
      color: green;
      position: fixed;
      top: 10px;
      left: 10px;
      cursor: pointer;
    }

    #updown.up::before {
      content: '▲';
    }

    #updown.down::before {
      content: '▼';
    }
  </style>
  <meta charset="utf-8">
</head>

<body>

  <div id="matrix">
    <script>
      for (var i = 0; i < 2000; i++) document.writeln(i)
    </script>
  </div>

  <div id="updown"></div>

  <script>
    var updownElem = document.getElementById('updown');

    var pageYLabel = 0;

    updownElem.onclick = function() {
      var pageY = window.pageYOffset || document.documentElement.scrollTop;

      switch (this.className) {
        case 'up':
          pageYLabel = pageY;
          window.scrollTo(0, 0);
          this.className = 'down';
          break;

        case 'down':
          window.scrollTo(0, pageYLabel);
          this.className = 'up';
      }

    }

    window.onscroll = function() {
      var pageY = window.pageYOffset || document.documentElement.scrollTop;
      var innerHeight = document.documentElement.clientHeight;

      switch (updownElem.className) {
        case '':
          if (pageY > innerHeight) {
            updownElem.className = 'up';
          }
          break;

        case 'up':
          if (pageY < innerHeight) {
            updownElem.className = '';
          }
          break;

        case 'down':
          if (pageY > innerHeight) {
            updownElem.className = 'up';
          }
          break;

      }
    }
  </script>
</body>

</html>

рони · #2 (**permalink**) 21.08.2015, 11:18

galych,
версия ie?

galych · #3 (**permalink**) 21.08.2015, 15:46

пробовал 8 и 11

Главное в песочнице отрабатывает

ksa · #4 (**permalink**) 21.08.2015, 16:42

Сообщение от galych

Главное в песочнице отрабатывает

Может из-за кодировки... В твоем примере она вообще не указана.

ksa · #5 (**permalink**) 21.08.2015, 16:43

Как тут...

<!DOCTYPE HTML>
<html>

<head>
  <style>
    body,
    html {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    #matrix {
      width: 400px;
      margin: auto;
      overflow: auto;
      text-align: justify;
    }

    #updown {
      height: 9px;
      width: 14px;
      color: green;
      position: fixed;
      top: 10px;
      left: 10px;
      cursor: pointer;
    }

    #updown.up::before {
      content: '▲';
    }

    #updown.down::before {
      content: '▼';
    }
  </style>
  <meta charset="utf-8">
</head>

<body>

  <div id="matrix">
    <script>
      for (var i = 0; i < 2000; i++) document.writeln(i)
    </script>
  </div>

  <div id="updown"></div>

  <script>
    var updownElem = document.getElementById('updown');

    var pageYLabel = 0;

    updownElem.onclick = function() {
      var pageY = window.pageYOffset || document.documentElement.scrollTop;

      switch (this.className) {
        case 'up':
          pageYLabel = pageY;
          window.scrollTo(0, 0);
          this.className = 'down';
          break;

        case 'down':
          window.scrollTo(0, pageYLabel);
          this.className = 'up';
      }

    }

    window.onscroll = function() {
      var pageY = window.pageYOffset || document.documentElement.scrollTop;
      var innerHeight = document.documentElement.clientHeight;

      switch (updownElem.className) {
        case '':
          if (pageY > innerHeight) {
            updownElem.className = 'up';
          }
          break;

        case 'up':
          if (pageY < innerHeight) {
            updownElem.className = '';
          }
          break;

        case 'down':
          if (pageY > innerHeight) {
            updownElem.className = 'up';
          }
          break;

      }
    }
  </script>
</body>

</html>