gpt4 book ai didi

javascript - 创建无缝嵌套滚动翻转

转载 作者:技术小花猫 更新时间:2023-10-29 12:55:10 24 4
gpt4 key购买 nike

我正在尝试创建一系列窗口大小的 div,其中内部 div 的大小可变 > 窗口大小。问题是它需要像没有嵌套的 div 一样滚动。

简而言之,我想要这个:

css{
block{ height:100wh; }
innerBlockSmall{ height:100wh; }
innerBlockLarge{ height:200wh; }
}


<div class="block">
<div class="innerBlockLarge"></div>
</div>
<div class="block">
<div class="innerBlockSmall"></div>
</div>

https://jsfiddle.net/cbuh8psd/

像这样行事

css{
innerBlockSmall{ height:100wh; }
innerBlockLarge{ height:200wh; }
}

<div class="innerBlockLarge"></div>
<div class="innerBlockSmall"></div>

https://jsfiddle.net/t6zrvo7u/1/

不幸的是,滚动“焦点”是由悬停在可滚动元素上触发的。在这种情况下,这是一种不良行为。

我目前知道有 2 种可能的解决方案。

  1. 通过 javascript 手动分配滚动“焦点”。 (最优)

  2. 完全覆盖默认的 HTML 滚动 javascript,用于例如库 ISCROLL5.
    (好的,如果性能影响很小)

不幸的是,在查看了 developer.mozilla 的 HTML5 文档后,我没有遇到任何通过 javascript 来“聚焦”滚动到元素的方法。

至于选项 2:ISCROLL5 对超过 ~15-20 个滚动 div 的性能产生了不良影响。

我希望我在这里遗漏了一些东西,任何解决方案、修复或建议都将不胜感激。

最佳答案

此解决方案允许滚动整个文档,同时保留使用鼠标滚动每个嵌套 div 的可能性。我希望我理解正确。

这只是一个概念,并不会阻止嵌套元素随window一起滚动。但它可以改进。

Array.prototype.slice.call( document.getElementsByClassName('sbRemover') )
.forEach(function (div) {
var scroll = 0,
mousedown = false,
mouseBtnHandler = function (e) {
mousedown = e.type == 'mousedown';
}

div.addEventListener('scroll', function (e) {
// Change of div's scrollTop. Negative when scrolling down
var diff = scroll - e.target.scrollTop;
// Save new scroll value to be able to compare with it later
scroll = e.target.scrollTop;
// Do nothing when div is scrolled by dragging the scrollbar
if (!mousedown) {
// Scroll the window to the same amount of pixels the div was scrolled
window.scrollTo(window.pageXOffset, window.pageYOffset - diff);
}
});
div.addEventListener('mouseup', mouseBtnHandler);
div.addEventListener('mousedown', mouseBtnHandler);
});
body, div {
margin: 0;
padding: 0;
}
.block{
position: relative;
width:100vw;
height:100vh;
overflow: hidden;
z-index: 1;
opacity: 100;
}
.sbRemover{
width:100%;
height:100%;
padding-right:15px;
overflow: auto;
}
.largeContent{
height:225vh;
}
.smallContent{
height:100vh;
}
<div id="simpleCanvas">
<div class="block" style="background-color: blue">
<div class="sbRemover">
<div id="ok" class="largeContent" style="background-image: url('http://silviahartmann.com/background-tile-art/images/grey-repeating-background-8.jpg');"></div>
</div>
</div>
<div class="block" style="background-color: red;">
<div class="sbRemover">
<div class="largeContent" style="background-image: url('http://a1star.com/images/star--background-seamless-repeating9.jpg');"></div>
</div>
</div>
<div class="block" style="background-color: green">
<div class="sbRemover">
<div class="smallContent"></div>
</div>
</div>
<div class="block" style="background-color: blue">
<div class="sbRemover">
<div class="smallContent"></div>
</div>
</div>
<div class="block" style="background-color: red;">
<div class="sbRemover">
<div class="largeContent" style="background-image: url('http://people.stfx.ca/x2011/x2011ane/info102/assignment1/11500341-abstract-colorful-repeating-background.jpg');"></div>
</div>
</div>
<div class="block" style="background-color: green">
<div class="sbRemover">
<div class="smallContent"></div>
</div>
</div>
</div>

关于javascript - 创建无缝嵌套滚动翻转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30474975/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com