顶部固定时划屏出现闪动
头部是一个普通的div，高度是48,头部下面有个固定的banner，手下滑的时候，banner会固定在浏览器最顶部不动。出现的问题是，PC端是好的，手机浏览器向上滑动的时候出现闪动！影响用户体验。
解决方法一：
之前的做法：
if ($(window).scrollTop() < 48) {
$(".nav ").css("top", 48 - parseInt($(window).scrollTop()));
}else{
$(".nav ").css("top", "0");
}
$(window).scroll(function () {
$(".nav ").css("top", "0");
var toplength = parseInt($(window).scrollTop());
if ($(window).scrollTop() < 48) {
$(".nav ").css("top", 48 - toplength);
}
});
这样做手机网站中会出现明显的闪动效果！
改进之后的做法：
if ($(window).scrollTop() < 48) {
$(".nav ").stop().animate({"top":48 - parseInt($(window).scrollTop())},"fast");
} else {
$(".nav ").stop().animate({"top": "0"},"fast");
}
$(window).scroll(function () {
var toplength = parseInt($(window).scrollTop());
if ($(window).scrollTop() < 48) {
$(".nav ").stop().animate({"top": 48 - toplength},"fast");
}else{
$(".nav ").stop().animate({"top": "0"},"fast");
}
});
这样做滑动的时候，有个向上的动画效果，不会出现闪动！
解决方法二：
思路：顶部固定的地方，一开始和上面不固定的地方是一体的，不写position:fixed，当要固定的div的offset比scrolltop小的时候，让其固定。（我之前之所以没有用这个方法，是因为整个页面在ios中要引用，当在ios中的时候，头部不出现。）
代码如下：
menuPosition: function() {
var m = $(window).scrollTop(),
n = $("#idmenuinfo的父亲").offset().top,
l = $("#menuinfo");
if (m >= n) {
if (!l.hasClass("menuinfo")) {
l.addClass("menuinfo")
}
} else {
l.removeClass("menuinfo")
}
}
menuinfo的样式如下：
.menuinfo {
position: fixed!important;
width: 100%;
left: 0;
top: 0;
}
表层div滑动、导致底层body滑动
body很长，可以滑动，body头部有一个模拟下拉的选择框。下拉选择有滚动轴，如下图。
我给body一个overflow：hidden和高度是没有用的。手机网站上背景还是可以滑动，然后我给body一个touchmove的preventdefault()阻止事件，body滑动阻止了，PC上面是可以了，但是手机上面滑动div还是会导致底部body的滑动，我给div 一个阻止冒泡的事件stopPropagation()，手机网站上面还是不可以。
关于preventdefault和stopPropagation，后面有时间会讲解其区别。
解决方案:
我经过反复测试，发现滚动轴滚到底部的时候，会触发body的滑动，那么我就在事件滚到底部的时候对表层的div做一个touchmove的阻止。到达滚动轴底部，向下滑动，阻止事件，向上滑动，开启事件。为此就要判断touchmove的方向了。
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("top 2 bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
上面的方法是判断touchmove的滑动方向。
$('#haorooms底层背景').bind("touchmove", function (e) {
e.preventDefault();
});
$(".滚动的父亲").bind("touchstart", function (events) {
startY = events.originalEvent.changedTouches[0].pageY;
});
$(".滚动的父亲 ul").bind("touchmove", function (e) {
var ulheight = $(this).height();
var scrollTop = $(this).scrollTop();
var scrollheight = $(this)[0].scrollHeight;
if (ulheight + scrollTop + 20 >= scrollheight) { //滚到底部20px左右
$(".滚动的父亲").bind("touchmove", function (event) {
moveEndY = event.originalEvent.changedTouches[0].pageY,
theY = moveEndY - startY;
if (theY > 0) { //用上面的abs()更加准确！
$(".滚动的父亲").unbind("touchmove");
}
if (theY < 0) {
event.preventDefault();
}
})
}
if (scrollTop < 20) {//滚到顶部20px左右
$(".滚动的父亲").bind("touchmove", function (event) {
moveEndY = event.originalEvent.changedTouches[0].pageY,
theY = moveEndY - startY;
if (theY > 0) {
event.preventDefault();
}
if (theY < 0) {
$(".滚动的父亲").unbind("touchmove");
}
})
}
});
jQuery,滑动,div,移动
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。