时间戳

首页 > 解决方案 > 让 div 留在视图内

javascript - 让 div 留在视图内

问题描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>

<body>
    <div class="videoPop">
        <div class="point"></div>
        <iframe width="440" height="245"
            src="https://www.youtube.com/embed/fj984wXo3O8?autoplay=1&controls=0&disablekb=1&modestbranding=1&rel=0&loop=1"
            frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope">
        </iframe>
    </div>
    <script>
        window.onload = function () {
            var bsDiv = document.querySelector(".videoPop");
            var x, y;
            window.addEventListener("mousemove", function (event) {
                x = event.clientX;//-217
                y = event.clientY - 165;//-280
                if (typeof x !== "undefined") {
                    bsDiv.style.left = x + "px";
                    bsDiv.style.top = y + "px";
                }
            }, false);
        }
    </script>
    <style>
        .videoPop {
            background-color: #3b3b3b;
            border-radius: 0px;
            position: fixed;
            border-radius: 10px;
            width: 440px;
            height: 245px;
            z-index: 200;
            border: 5px solid #3b3b3b;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .videoPop:after {
            content: '';
            position: absolute;
            top: 100%;
            left: 55%;
            margin-left: -55px;
            width: 0;
            height: 0;
            border-top: solid 30px #3b3b3b;
            border-left: solid 30px transparent;
            border-right: solid 30px transparent;

        }


        .videoPopLoading {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
        }

        iframe {
            border-radius: 5px;
        }
    </style>
</body>

</html>

播放视频时，带有 youtube 视频的 div 会跟随光标。但我不希望视频超过窗口 innerHeight 和 innerWidth。我希望它可能坚持不出去，但仍然跟随光标，直到它必须出去。

纯 JS 也没有 JQuery 或其他库

正如您在这张图片中看到的那样，div 越过 innerWidth（墙）我不希望它

标签： javascripthtmlcssweb

解决方案

您可以像这样计算最大/最小 x 和 y 值：

window.onload = function() {
  var bsDiv = document.querySelector(".videoPop");
  const divWidth = bsDiv.clientWidth;
  const divHeight = bsDiv.clientHeight;
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
  var x, y;
  window.addEventListener("mousemove", function(event) {
    x = Math.max(event.clientX, divWidth / 2); //-217
    y = Math.max(event.clientY - 165, divHeight / 2); //-280
    x = Math.min(x, windowWidth - divWidth / 2);
    y = Math.min(y, windowHeight - divHeight / 2);
    if (typeof x !== "undefined") {
      bsDiv.style.left = x + "px";
      bsDiv.style.top = y + "px";
    }
  }, false);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
</head>

<body>
  <div class="videoPop">
    <div class="point"></div>
    <iframe width="440" height="245" src="https://www.youtube.com/embed/fj984wXo3O8?autoplay=1&controls=0&disablekb=1&modestbranding=1&rel=0&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope">
        </iframe>
  </div>
  <style>
    .videoPop {
      background-color: #3b3b3b;
      border-radius: 0px;
      position: fixed;
      border-radius: 10px;
      width: 440px;
      height: 245px;
      z-index: 200;
      border: 5px solid #3b3b3b;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    .videoPop:after {
      content: '';
      position: absolute;
      top: 100%;
      left: 55%;
      margin-left: -55px;
      width: 0;
      height: 0;
      border-top: solid 30px #3b3b3b;
      border-left: solid 30px transparent;
      border-right: solid 30px transparent;
    }
    
    .videoPopLoading {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
    }
    
    iframe {
      border-radius: 5px;
    }
  </style>
</body>

</html>

推荐阅读