个人中心
gpt4 book ai didi

javascript - 溢出不允许js用滚动隐藏元素

转载 作者：行者123 更新时间：2023-11-28 02:26:50 25 4
gpt4 key购买 nike

所以我有标题标签，当向下滚动时它会隐藏它。但是因为我想使用带溢出的视差层，所以我无法这样做，标题只是卡在屏幕上并与其他元素一起向同一方向移动。

如果您在 css 中禁用溢出，您会看到效果正常，但如果禁用溢出，我将失去视差效果。

var $content = $('.box');

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

function Scroller() {
  this.latestKnownScrollY = 0;
  this.ticking = false;
};

Scroller.prototype = {
  init: function() {
    window.addEventListener('scroll', this.onScroll.bind(this), false);
  },

  onScroll: function() {
    this.latestKnownScrollY = window.scrollY;
    this.requestTick();
  },

  requestTick: function() {
    if (!this.ticking) {
      window.requestAnimFrame(this.update.bind(this));
    }
    this.ticking = true;
  },

  update: function() {
    var currentScrollY = this.latestKnownScrollY;
    this.ticking = false;

    var slowScroll = currentScrollY / 2
    var opaScroll = 1.4 - currentScrollY / 200
    $content.css({
      'transform': 'translateY(' + slowScroll + 'px)',
      '-moz-transform': 'translateY(' + slowScroll + 'px)',
      '-webkit-transform': 'translateY(' + slowScroll + 'px)',
      'opacity': opaScroll
    });

  }
};

var scroller = new Scroller();
scroller.init();
* {
  box-sizing: border-box;
}

html,
body {
  background-color: #FEDCC8;
}

body {
  margin: 0;
  position: relative;
}

.parallax {
  -webkit-perspective: 100px;
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  /*   left: 50%; */
  left: 0;
  right: 0;
  bottom: 0;
  /*   margin-left: -1500px; */
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  object-fit: cover;
}

.parallax__cover {
  background: rgb(199, 27, 187);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2000px;
  z-index: 2;
  /* left: 20%; */
}

.parallax__layer__0 {
  -webkit-transform: translateZ(-300px) scale(4);
  transform: translateZ(-300px) scale(4);
}

.parallax__layer__1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
  transform: translateZ(-250px) scale(3.5);
}

.parallax__layer__2 {
  -webkit-transform: translateZ(-200px) scale(3);
  transform: translateZ(-200px) scale(3);
}

.parallax__layer__3 {
  -webkit-transform: translateZ(-150px) scale(2.5);
  transform: translateZ(-150px) scale(2.5);
}

.parallax__layer__4 {
  -webkit-transform: translateZ(-100px) scale(2);
  transform: translateZ(-100px) scale(2);
}

.parallax__layer__5 {
  -webkit-transform: translateZ(-50px) scale(1.5);
  transform: translateZ(-50px) scale(1.5);
}

.parallax__layer__6 {
  -webkit-transform: translateZ(0px) scale(1);
  transform: translateZ(0px) scale(1);
}

.section {
  text-align: center;
  padding: 50px 80px;
  /* position: fixed; */
  z-index: 14;
  /* left: 20px;
      right: 20px; */
  line-height: auto;
  box-shadow: 0px 0px 40px -1px #000000bf;
  /* left: 80%; */
}

.section_dark {
  background-color: #282e34;
  color: #ddd;
}

header .box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* overflow-x: hidden; */
  overflow-y: auto;
}

header text-box {
  transform: translate(-50%, -50%);
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 25%;
  left: 50%;
  color: #fff;
  border: 1px solid #fff;
  padding: .5em 3em .2em 3em;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 25px;
  line-height: 2em;
}

header h1,
header h2 {
  margin: 0;
}

.text {
  color: #fff;
  text-decoration: none;
  line-height: 3rem;
  background-color: #282e34;
  padding: 10px 0px;
  margin: 0 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Firewatch Parallax in CSS</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="parallax">
    <div class="parallax__layer parallax__layer__0">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_0.png" />
    </div>
    <div class="parallax__layer parallax__layer__1">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_1.png" />
    </div>
    <div class="parallax__layer parallax__layer__2">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_2.png" />
    </div>
    <div class="parallax__layer parallax__layer__3">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_3.png" />
    </div>

    <header>
      <div class="box">
        <text-box>
          <h1>Test</h1>
        </text-box>
      </div>
    </header>

    <div class="parallax__layer parallax__layer__4">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_4.png" />
    </div>
    <div class="parallax__layer parallax__layer__5">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_5.png" />
    </div>
    <div class="parallax__layer parallax__layer__6">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_6.png" />
    </div>
    <div class="parallax__cover">
      <section class="section section_dark">
        <h2>Section One</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum
        </p>
      </section>
    </div>
  </div>

  <script src='js/jquery.min.js'></script>
  <script src="js/index.js"></script>
</body>

</html>

最佳答案

发生的事情是当添加溢出时它添加滚动到 div parallax 而不是 window 来检查更改 css 类 parallax height:1000px 而你会注意到您有 2 个滚动检查下面添加到 CodePen 中的链接 所以将其更改回来并在 div parallax 中添加 id="par" 也在 JS 脚本中从 window 到 document.getElementById('par') 并且 onScroll: function() 从 window.scrollY 更改为 document。 getElementById('par').scrollTop

Link

顺便提一下好主意

      var $content = $('.box');

  document.getElementById('par').requestAnimFrame = (function() {
  return document.getElementById('par').requestAnimationFrame ||
  document.getElementById('par').webkitRequestAnimationFrame ||
  document.getElementById('par').mozRequestAnimationFrame ||
    function(callback) {
     window.setTimeout(callback, 1000 / 60);
    };
})();

function Scroller() {
  this.latestKnownScrollY = 0;
  this.ticking = false;
};

Scroller.prototype = {
  init: function() {
    document.getElementById('par').addEventListener('scroll', this.onScroll.bind(this), false);
  },

  onScroll: function() {
    this.latestKnownScrollY =  document.getElementById('par').scrollTop;
    this.requestTick();
  },

  requestTick: function() {
    if (!this.ticking) {
    document.getElementById('par').requestAnimFrame(this.update.bind(this));
    }
    this.ticking = true;
  },

  update: function() {
    var currentScrollY = this.latestKnownScrollY;
    this.ticking = false;    
    var slowScroll = currentScrollY / 2
    var opaScroll = 1.4 - currentScrollY / 200
    $content.css({
      'transform': 'translateY(' + slowScroll + 'px)',
      '-moz-transform': 'translateY(' + slowScroll + 'px)',
      '-webkit-transform': 'translateY(' + slowScroll + 'px)',
      'opacity': opaScroll
    });

  }
};

var scroller = new Scroller();
scroller.init();
* {
  box-sizing: border-box;
}

html,
body {
  background-color: #FEDCC8;
}

body {
  margin: 0;
  position: relative;
}

.parallax {
  -webkit-perspective: 100px;
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  /*   left: 50%; */
  left: 0;
  right: 0;
  bottom: 0;
  /*   margin-left: -1500px; */
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  object-fit: cover;
}

.parallax__cover {
  background: rgb(199, 27, 187);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2000px;
  z-index: 2;
  /* left: 20%; */
}

.parallax__layer__0 {
  -webkit-transform: translateZ(-300px) scale(4);
  transform: translateZ(-300px) scale(4);
}

.parallax__layer__1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
  transform: translateZ(-250px) scale(3.5);
}

.parallax__layer__2 {
  -webkit-transform: translateZ(-200px) scale(3);
  transform: translateZ(-200px) scale(3);
}

.parallax__layer__3 {
  -webkit-transform: translateZ(-150px) scale(2.5);
  transform: translateZ(-150px) scale(2.5);
}

.parallax__layer__4 {
  -webkit-transform: translateZ(-100px) scale(2);
  transform: translateZ(-100px) scale(2);
}

.parallax__layer__5 {
  -webkit-transform: translateZ(-50px) scale(1.5);
  transform: translateZ(-50px) scale(1.5);
}

.parallax__layer__6 {
  -webkit-transform: translateZ(0px) scale(1);
  transform: translateZ(0px) scale(1);
}

.section {
  text-align: center;
  padding: 50px 80px;
  /* position: fixed; */
  z-index: 14;
  /* left: 20px;
      right: 20px; */
  line-height: auto;
  box-shadow: 0px 0px 40px -1px #000000bf;
  /* left: 80%; */
}

.section_dark {
  background-color: #282e34;
  color: #ddd;
}

header .box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* overflow-x: hidden; */
  overflow-y: auto;
}

header text-box {
  transform: translate(-50%, -50%);
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 25%;
  left: 50%;
  color: #fff;
  border: 1px solid #fff;
  padding: .5em 3em .2em 3em;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 25px;
  line-height: 2em;
}

header h1,
header h2 {
  margin: 0;
}

.text {
  color: #fff;
  text-decoration: none;
  line-height: 3rem;
  background-color: #282e34;
  padding: 10px 0px;
  margin: 0 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Firewatch Parallax in CSS</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div id="par" class="parallax">
    <div class="parallax__layer parallax__layer__0">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_0.png" />
    </div>
    <div class="parallax__layer parallax__layer__1">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_1.png" />
    </div>
    <div class="parallax__layer parallax__layer__2">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_2.png" />
    </div>
    <div class="parallax__layer parallax__layer__3">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_3.png" />
    </div>

    <header>
      <div class="box">
        <text-box>
          <h1>Test</h1>
        </text-box>
      </div>
    </header>

    <div class="parallax__layer parallax__layer__4">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_4.png" />
    </div>
    <div class="parallax__layer parallax__layer__5">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_5.png" />
    </div>
    <div class="parallax__layer parallax__layer__6">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_6.png" />
    </div>
    <div class="parallax__cover">
      <section class="section section_dark">
        <h2>Section One</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum
        </p>
      </section>
    </div>
  </div>

  <script src='js/jquery.min.js'></script>
  <script src="js/index.js"></script>
</body>

</html>

关于javascript - 溢出不允许js用滚动隐藏元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53432450/

25 4 0
文章推荐： javascript - 如何用javascript读取和删除Cookie？
文章推荐： javascript - ASP.NET:如何从弹出窗口获取 JavaScript 变量？
文章推荐： c# - 如何在按赞按钮后获取用户信息
文章推荐： javascript - 您能否从源代码中显示的属性中检索值？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com