gpt4 book ai didi

javascript - CSS 部分滚动捕捉

转载 作者:行者123 更新时间:2023-12-04 13:50:49 26 4
gpt4 key购买 nike

一直在玩滚动捕捉,看起来用 JS 编写功能可以节省很多麻烦。
这是一个挑战,有没有人找到一种方法来有选择地选择要捕捉的 child 和自由滚动的 child ?
我认为这对于包含无法从滚动捕捉中受益的内容丰富的页面很有用。
下面是问题的一个例子:
https://codepen.io/nodelondon/pen/YzxWqLG

html {
background: #f2f2f2;
}

.scroll-container,
.scroll-area-none,
.scroll-area {
max-width: 850px;
height: 600px;
font-size: 60px;
}

.scroll-area-none {
scroll-snap-align: none;
background-color: black;
}

.scroll-container {
overflow: auto;
scroll-snap-type: y mandatory;
}

.scroll-area {
scroll-snap-align: start;
}

.scroll-container,
.scroll-area-none,
.scroll-area {
margin: 0 auto;
}

.scroll-area-none,
.scroll-area {
display: flex;
align-items: center;
justify-content: center;
color: white;
}

.scroll-area:nth-of-type(4n+1) {
background: #49b293;
}

.scroll-area:nth-of-type(4n+2) {
background: #c94e4b;
}

.scroll-area:nth-of-type(4n+3) {
background: #4cc1be;
}

.scroll-area:nth-of-type(4n+4) {
background: #8360A6;
}
<div class="support-scrollsnap"></div>

<div class="scroll-container">
<div class="scroll-area-none">-1</div>
<div class="scroll-area-none">0</div>
<div class="scroll-area">1</div>
<div class="scroll-area">2</div>
<div class="scroll-area">3</div>
<div class="scroll-area">4</div>
<div class="scroll-area-none">5</div>
<div class="scroll-area-none">6</div>
</div>

理想情况下,带有 -1、0、5 和 6 的框应该能够自由滚动,但介于两者之间的强制框会不断将您拉回来。
如果您正在考虑建议将其更改为接近度,这是一个很好的建议,但是,对于 IOS Safari(对我来说也是在 OSX Safari 上),不幸的是,它仍然强制在将 scroll-snap-align 设置为的框上进行滚动捕捉无论您在页面上的哪个位置,都可以开始。

最佳答案

我提出以下逻辑:

  • 定义哪个子块位于滚动容器的顶部边界。我正在使用 the Element.getBoundingClientRect() method比较滚动容器及其子项的位置。
  • 检查哪个scroll-snap-align属性有这个子块。
  • 设置 scroll-snap-type容器的属性为 y proximityy mandatory .
  • 处理scroll桌面上的事件,在移动设备上此事件有效 at the end of the scroll ,所以我们需要一些其他的移动设备(可能是 jQuery Mobile )。

  • 这是一个工作草案解决方案。但它需要优化和改进,例如 scroll event throttling .
    https://codepen.io/glebkema/pen/zYdPqeY

    let scrollContainers = document.getElementsByClassName('scroll-container');
    for (let sc of scrollContainers) {
    sc.addEventListener('scroll', updateSnapType);
    sc.addEventListener('touchstart', updateSnapType);
    }

    function updateSnapType(event) {
    let parent = event.currentTarget;
    let parentRect = parent.getBoundingClientRect();
    for (let child of parent.children) {
    let childRect = child.getBoundingClientRect();
    if (childRect.top <= parentRect.top && parentRect.top < childRect.bottom) {
    let childStyle = window.getComputedStyle(child);
    let scrollSnapAlign = childStyle.getPropertyValue('scroll-snap-align');
    console.log(child.innerText, scrollSnapAlign);
    parent.style.scrollSnapType = "none" === scrollSnapAlign ? 'y proximity' : 'y mandatory';
    break;
    }
    }
    }
    html {
    background: #f2f2f2;
    }

    .scroll-container,
    .scroll-area-none,
    .scroll-area {
    height: 100px;
    font-size: 60px;
    }

    .scroll-container {
    max-width: 850px;
    margin: 15px auto;
    overflow: auto;
    scroll-snap-type: y mandatory;
    }

    .scroll-area {
    scroll-snap-align: start;
    }

    .scroll-area-none {
    scroll-snap-align: none;
    background-color: black;
    }

    .scroll-area-none,
    .scroll-area {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    }

    .scroll-area:nth-of-type(4n+1) {
    background: #49b293;
    }

    .scroll-area:nth-of-type(4n+2) {
    background: #c94e4b;
    }

    .scroll-area:nth-of-type(4n+3) {
    background: #4cc1be;
    }

    .scroll-area:nth-of-type(4n+4) {
    background: #8360A6;
    }
    <div class="scroll-container">
    <div class="scroll-area-none">1. -1</div>
    <div class="scroll-area-none">1. 0</div>
    <div class="scroll-area">1. 1</div>
    <div class="scroll-area">1. 2</div>
    <div class="scroll-area">1. 3</div>
    <div class="scroll-area">1. 4</div>
    <div class="scroll-area-none">1. 5</div>
    <div class="scroll-area-none">1. 6</div>
    </div>

    <div class="scroll-container">
    <div class="scroll-area-none">2. -1</div>
    <div class="scroll-area-none">2. 0</div>
    <div class="scroll-area">2. 1</div>
    <div class="scroll-area">2. 2</div>
    <div class="scroll-area">2. 3</div>
    <div class="scroll-area">2. 4</div>
    <div class="scroll-area-none">2. 5</div>
    <div class="scroll-area-none">2. 6</div>
    </div>

    关于javascript - CSS 部分滚动捕捉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69628287/

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