javascript - 在 CSS 滚动捕捉中调整浏览器大小的问题-6ren

javascript - 在 CSS 滚动捕捉中调整浏览器大小的问题

转载作者：太空宇宙更新时间：2023-11-04 05:55:41

27

4

我正在尝试实现一个书本 View ，其中一页一次可见，用户可以轻扫每一页进行导航。所有页面的大小都相同，我必须在 100% 视口(viewport)宽度上显示每个页面。我的问题是，当我在没有 X 的页面上并尝试调整浏览器窗口的大小时，我最终会在其他页面上没有。我希望它只保留在第 X 页。当我在第一页或最后一页时，这不会发生。我为此创建了一个 fiddle 。 https://jsfiddle.net/8y5swhj9/ .

<!DOCTYPE html>
    <html>
    <head>
        <title>POC</title>
        <style type="text/css">
            .container {
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-item-align: start;
                outline: none;
                -webkit-overflow-scrolling: touch;
                -ms-overflow-style: none;
                overflow-x: scroll;
                overflow-y: hidden;
                overflow-y: -moz-hidden-unscrollable;
                -ms-scroll-chaining: none;
                -ms-scroll-snap-coordinate: 100vw 0;
                scroll-snap-coordinate: 100vw 0;
                -ms-scroll-snap-destination: 100vw 0;
                scroll-snap-destination: 100vw 0;
                -ms-scroll-snap-points-x: snapInterval(0%, 100%);
                -ms-scroll-snap-points-x: repeat(100vw);
                scroll-snap-points-x: repeat(100vw);
                -ms-scroll-snap-type: mandatory;
                -ms-scroll-snap-type: x mandatory;
                scroll-snap-type: x mandatory;
                scroll-snap-type: mandatory;
                scrollbar-width: none;
                width: 100%;
            }
            .page {
                align-items: center;
                display: flex;
                height: 100%;
                justify-content: center;
                min-width: 100%;
                position: relative;
                scroll-snap-align: start;
                width: 100%;
                box-shadow: inset 0 0 20px #000000;
            }
        </style>
    </head>
    <body>
        <div class="container" style="height: 359px;">
            <div class="page">
                <h1>1</h1>
            </div>
            <div class="page">
                <h1>2</h1>
            </div>
            <div class="page">
                <h1>3</h1>
            </div>
            <div class="page">
                <h1>4</h1>
            </div>
            <div class="page">
                <h1>5</h1>
            </div>
            <div class="page">
                <h1>6</h1>
            </div>
            <div class="page">
                <h1>7</h1>
            </div>
            <div class="page">
                <h1>8</h1>
            </div>
            <div class="page">
                <h1>9</h1>
            </div>
            <div class="page">
                <h1>10</h1>
            </div>
        </div>
    </body>
    </html>

在这段代码中，如果你移动到一个中心位置，比如第 6 页，然后横向调整浏览器窗口的大小，你会看到整个内容开始流动，我们最终出现在某个随机的第 6 页上。

我的灵感来自 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_hor_scroll .这有一个水平滚动的菜单。我为此创建了一个 fiddle :https://jsfiddle.net/xyzasmb2/这里不会出现这个问题。

我无法理解和解决这个问题。有人可以帮忙吗？

最佳答案

问题是内容随容器缩放，因为它是容器宽度的倍数……而 scrollLeft 位置保持不变，以距左边缘的像素为单位。目前我能想到的解决这个问题的唯一方法是检测容器的大小调整，但你只能绑定(bind)到窗口的调整大小，而不是单个元素的调整大小事件......除了使用一些技巧:How to detect DIV's dimension changed?

我希望有一种方法可以将 scrollLeft 位置指定为总宽度的百分比，这样就可以解决这个问题。

关于javascript - 在 CSS 滚动捕捉中调整浏览器大小的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57826420/

27

4

0

文章推荐： python - 在忽略值的同时排序查询集

文章推荐： python - 没有重定向 URI 的 Spotify？

捕捉 WM_DEVICECHANGE
如何知道 WM_DEVICECHANGE 的到来？ WndProc 被覆盖。我收到了所有消息，但没有一条是 WM_DEVICECHANGE 类型的。 RegisterDeviceNotificatio
wpf - 捕捉 SurfaceListBox
我想创建一个滚动的表面列表框，它会在拖动完成后自动捕捉到一个位置，以便屏幕上的中心项目在视口(viewport)中居中。我已经得到了中心项，但现在像往常一样，WPF 处理大小、屏幕位置和偏移量的方式
javascript - 最接近的值(捕捉)
如果我有一个使用步长的范围 slider ，例如从 0 到 100，步长为 5，然后我在该范围之间有一个随机值，比如说 56，我如何确定最接近的捕捉值 (55) 是多少？我正在考虑向前和向后循环，直
javascript - 捕捉/监听函数的执行
我想添加到模块记录器中的所有功能。我想记录函数的“开始”时间和“结束”时间。这样我就可以获得每个函数(同步函数)的执行时间。但我不知道如何让它工作.. =(我不想以某种动态方式重写函数 - 我想在将
c# - 捕捉 IOException
我正在编写一个 C# 应用程序，如果文件已被某个进程使用，我必须在其中显示一条消息，如果该文件不存在，则应用程序需要显示另一条消息。像这样: try { //Code to open a f
捕捉[框]的JavaScript正则表达式
所以我正在使用城市词典 api，他们的术语可以链接到其他使用 [term] 和 api 的框，我想使它们实际上在 markdown 中超链接，即 term所以我尝试制作一个替换正则表达式来做到这一点我
水平滚动后的 jQuery 捕捉
我有一个使用鼠标滚轮 jQuery 插件的水平滚动网站。滚动有效，但我想将每个“文章”捕捉到文档的左侧，这样一旦停止滚动，它就不会停留在一半的位置。我目前的标记: CSS #viewport { w
c# - 捕捉/录制窗口声音
我需要在 windows 上录制声音。我需要写信来传输我从演讲者那里听到的内容。我可以依赖什么方法/API？最佳答案您可以使用 DirectSound ;可以找到 sample here这是针对麦
Matlab 尝试/捕捉
for ii = 1:2:2*de.nP G=[one, aux3(:,ii), aux3(:,ii) - aux2(:,ii),aux3(:,ii+1) - a
C# 尝试{} 捕捉{}
您好，感谢阅读。我是编程、C# 和套接字编程方面的新手。在我的代码中，我尝试发现问题以在我的应用程序中提供容错能力。以下内容: catch (ArgumentNullException
Javascript 尝试/捕捉
我有一个函数可以运行用户生成的正则表达式。但是，如果用户输入了一个不会运行的正则表达式，那么它就会停止并跌倒。我试过将行包装在 Try/Catch block 中，但是没有任何反应。如果有帮助，我正
c# - 嵌套尝试/捕捉
嵌套的 Try/Catch 是否表示您的编码不干净？我想知道，因为在我的 catch 中，我正在调用另一个方法，如果失败，我会收到另一个运行时错误，所以我很想再次使用另一个 try/catch 将这些
coordinates - 捕捉 Svg 边界框和变换坐标
我不知道如何放置一个相对于其同级路径边界框的路径。想象一个像窗口一样的盒子，我想在它的右上角放一个关闭按钮。这是在变换窗口(缩放 3 倍)后组合在一起的框和关闭按钮: 我只是在
iphone - 实现步骤/捕捉 UISlider
我正在尝试使用 UISlider 实现某种形式的捕捉或步骤。我编写了以下代码，但它并没有像我希望的那样顺利。它可以工作，但是当我向上滑动它时，它会向右移动 5 个点，使手指不在“滑动圆”的中心这是我
javascript - 捕捉 SVG 路径周围的可单击轮廓
目前，我使用 Snap SVG 创建一个小型建模工具。 var p = Snap.path(pathString).attr({fill:'none', stroke:'black', strokeW
javascript - 捕捉 svg 拖动一组集合
我希望能够使用 Snap SVG 将一组集合作为一个组进行拖动。到目前为止，我只能将子集(矩形和文本框)作为一个项目进行拖动，但我想要实现的是集体“表格”是可拖动的，而其中的字段仍保留为单独的形状，因
Kotlin:尝试，捕捉，并且只有在最后出现错误时
我有一段代码可以像这样抛出和捕获错误 try { } catch (e: FooException) { } catch (e: BarException) { } finally { } 并且有一些
php - 捕捉 Mysqli 错误
我定义了一个自定义错误处理程序，它捕获所有异常并将它们保存到日志中。现在，如果我在 mysqli 查询中出现语法错误，例如拼写错误，页面会在此时完全停止加载。不会引发异常，因此不会触发错误处理程序，也
javascript - 捕捉 svg 动画分组路径
我有以下分组的svg文件，g的id为flower-petals，然后里面的每个部分都是花瓣，我似乎无法更改每个内部路径的填充。我将 snap 的 petals 变量定义为 petals.Snap("
powershell - 尝试..捕捉..最终在读取主机期间失败
当脚本执行 Read-Host cmdlet，关闭窗口不会激活 finally堵塞。下面是一个随意但功能最少的示例。我正在使用 PowerShell 5.0。 Beep() 只是为了让 finally

首页

博学

6Ren·AI

商城

javascript - 在 CSS 滚动捕捉中调整浏览器大小的问题