标签: scroll-snap-points
Css scroll-snap bug iOS 10
我注意到iOS 10中有一个带有CSS scroll-snap属性的奇怪错误.
这是我的css:
#springBoard{
height: 100%;
width: 100%;
font-size: 0px;
white-space: nowrap;
overflow: scroll;
-webkit-overflow-scrolling: touch;
-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-x: repeat(100%);
}
section{
display: inline-block;
width: 100%;
height: 100%;
vertical-align: top;
font-size: 16px;
}
如果我以编程方式滚动到捕捉点,然后更改滚动捕捉容器内的内容,导航将捕捉到第一个捕捉点.
// Programatically scroll the scroll-snap container
$("#springBoard")[0].scrollLeft = 320
它似乎与我触发滚动的方式无关.所有这些滚动方法都会产生相同的结果:
$("#springBoard")[0].scrollLeft = 320
$("#springBoard").animate({scrollLeft: 320}, 1)
$("#springBoard > section:eq(1)")[0].scrollIntoView()
window.location.hash = "sectionId"
- 手动滚动时不会发生错误(请参阅下面的@maxime评论).
- 它出现在iOS版本10.3.2以后.
- 不知道它是否已在iOS 11中修复.
我花了几天时间试图解决这个问题但到目前为止没有成功.
有没有人知道绕过这个推荐指数
解决办法
查看次数
当您尝试放大时，CSS 滚动捕捉卡住
CSS-scroll-snap运行良好。但是，当您用一根手指在移动设备上滚动时，将这根手指保持在屏幕上并用另一根手指向相反方向滚动（例如缩放？），然后滚动快照会卡住。（无论在哪个浏览器上）
当您在滚动时按住 Ctrl 键时，它甚至可以在桌面上运行。
我不知道这是否是一个常见问题，但我找不到针对此问题的任何修复程序或变通方法。
有什么建议？
自己试试：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title></title>
<style media="screen">
.container{
scroll-snap-type: y mandatory;
height: 50vh;
width: 50%;
overflow-y: scroll;
}
.content {
scroll-snap-align: center;
height: 50vh;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="content" style="background:blue;">
1
</div>
<div class="content" style="background:red;">
2
</div>
<div class="content" style="background:green;">
3
</div>
<div class="content" style="background:orange;">
4
</div>
</div>
</body>
</html>推荐指数
解决办法
查看次数
单个滚动捕捉点,在页面的最后一个部分之前具有视口底部
推荐指数
解决办法
查看次数
CSS Scroll snap point在iOS 9.1 safari中不起作用
我刚刚将我的ipad mini更新到iOS 9.1并根据我可以使用我应该能够在我的设备上使用css snappoints进行safari.网上有快照点演示,但我写了一个我自己的(为什么不是:) DEMO.在该演示中,您可以水平滚动.
HTML:
<ol>
<li class="a"></il>
<li class="b"></il>
...
</ol>
样式:
ol {
list-style-type: none;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
scroll-behavior: smooth;
}
无论如何,我的演示在我的笔记本电脑上的FF和Safari中工作,但在我的iPad上却没有.所以问题是,我可以使用错误或者我做错了吗？
推荐指数
解决办法
查看次数
以编程方式在子级上设置“样式”时，iOS上的CSS Scroll Snap视觉故障
https://codepen.io/thomaslindstr_m/pen/qJLbwa
上面漂亮的骨头例子。我想淡出滚动离开的孩子，但是启用CSS Scroll Snap后，它开始在我的iPhone iOS 12.0.1上出现严重故障。
在此处观看视频： https : //file-qacepzxlkb.now.sh/
在重新加载之前，我禁用了Scroll Snap（JavaScript仍在运行），在重新加载之后，我启用了它。
这是JavaScript：
const windowWidth = window.innerWidth;
const viewsElement = document.querySelector('.views');
const firstViewContainer = viewsElement.querySelector('.container');
function scrollHandler(event) {
const {scrollLeft} = viewsElement;
const opacity = 1 - ((scrollLeft / windowWidth) / 1.5);
firstViewContainer.style = `opacity:${opacity};`;
}
viewsElement.addEventListener('scroll', scrollHandler, {passive: true});
CSS摘录：
.views {
overflow: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-snap-stop: always;
}
.view {
/* NOTE remove to see that this issue is related to …推荐指数
解决办法
查看次数
滚动时UIScrollView对齐位置
我正在尝试实现滚动视图,在滚动时捕捉到点.
我看到的所有帖子都是关于在用户结束拖动滚动后'捕捉到一个点'.我想在拖动过程中使其快速捕捉.
到目前为止,我有这个拖动后停止惯性,它工作正常:
func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
targetContentOffset.memory = scrollView.contentOffset
}
我尝试了这个,但没有按照预期工作:
var scrollSnapHeight : CGFloat = myScrollView.contentSize.height/10
scrollViewDidScroll:
func scrollViewDidScroll(scrollView: UIScrollView) {
let remainder : CGFloat = scrollView.contentOffset.y % scrollSnapHeight
var scrollPoint : CGPoint = scrollView.contentOffset
if remainder != 0 && scrollView.dragging
{
if self.lastOffset > scrollView.contentOffset.y //Scrolling Down
{
scrollPoint.y += (scrollSnapHeight - remainder)
NSLog("scrollDown")
}
else //Scrolling Up
{
scrollPoint.y -= (scrollSnapHeight - remainder)
}
scrollView .setContentOffset(scrollPoint, animated: …推荐指数
解决办法
查看次数
CSS 滚动快照的延迟时间是多久？
在具有某种 CSS 滚动捕捉活动的容器中滚动后，从用户滚动结束到浏览器开始滚动到捕捉位置的延迟是多久？
动机
我写了一个问题的答案CSS Scroll Snap with Animation Effect在那里我scrollend通过将滚动事件回调消除 250 毫秒来模拟事件。这似乎足够接近 Chrome 浏览器中的实际价值。但是获得一些一流的价值会很好。某处甚至可能有一个 API，以便我可以通过 JS 获得正确的值。
推荐指数
解决办法
查看次数
CSS 滚动对齐而不限制父级大小
我试图让网页滚动并在用户使用scroll-snap-type: y mandatory和滚动浏览网页时捕捉到某些元素的开头scroll-snap-align: start。我的问题是，这是一个很大的网页，与整个页面只是一个 div 和子项的许多示例不同，我有很多 div 和子项。如果我将 div 的直接容器限制为 100vh，滚动捕捉可以工作，但存在双重可滚动内容问题：文档滚动，内部 div 的捕捉内容独立于整个文档滚动。如果我不限制直接父母的身高，则捕捉不起作用。
这是一个示例： https: //codepen.io/canp/pen/abGJKXX
基本上，上面链接中的示例确实会卡住，但存在双滚动问题。我希望outer类 div 成为唯一的滚动组件，同时仍然捕捉到没有双滚动条的mid子pagediv 。
如何使文档滚动以捕捉到孙孙的开始位置？
推荐指数
解决办法
查看次数
@ font-face停止滚动捕捉点的工作？
我知道它仍然是非常新的和试验性的，但是一直在使用css滚动快照，并且暂时无法使它工作。
我最终意识到，虽然我在CSS中使用@ font-face，但是滚动捕捉不起作用。如果我将字体系列更改为“ Arial”而不是我定义的字体，则效果很好。
还有其他人遇到吗？
Codepen：https：//codepen.io/galvinben/pen/LgzLxK
@font-face {
font-family: 'fontName';
src: url('https://fontlibrary.org/assets/fonts/bebas/b98870e552991cf3daa1031f9fb5ec74/4c8d42e69711e4e230d9081694db00ce/BebasNeueLight.otf')
}
body {
margin: 0 auto;
width: 100vw;
height: 100vh;
overflow: auto;
scroll-snap-type: y proximity;
font-family: 'fontName';
}
.section {
width: 100%;
height: 100vh;
scroll-snap-align: start;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#one {
background-color: #222;
}
#two {
background-color: #333;
}
#three {
background-color: #444;
}
#four {
background-color: #555;
}
（更改字体系列后，可能必须刷新页面才能看到它是否工作。）
推荐指数
解决办法
查看次数
css scroll snap 不适用于 React 应用程序中的 div
我在不同的最新浏览器上对其进行了测试，因此它不可能是兼容性问题。我正在使用带有样式组件的 create-react-app，这是我的代码：
import React, { Component } from 'react';
import styled, { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css?family=Merriweather|Oleo+Script');
`
const Wrapper = styled.div`
scroll-snap-type: y mandatory;
display: flex;
flex-direction: column;
font-size: 16px;
`
const Home = styled.div`
scroll-snap-align: center;
height: 100vh;
background-color: yellow;
display: flex;
flex-direction: row;
`
const Menu = styled.div`
scroll-snap-align: center;
height: 100vh;
background-color: blue;
display: grid;
`
const Speciality = styled.div`
scroll-snap-align: center;
height: 100vh;
background-color: green;
`
class App extends Component …推荐指数
解决办法
查看次数
标签 统计
css ×8
html ×4
css3 ×3
ios ×3
javascript ×3
font-face ×1
multi-touch ×1
paging ×1
reactjs ×1
safari ×1
scroll ×1
scroll-snap ×1
swift ×1
uiscrollview ×1
webkit ×1