标题$(
window
).
scroll
()触发失效
最近遇到一个问题,在项目中写了$(“
window
”).
scroll
()方法,但是在滚动页面的时候发现此方法没有触发,后来查找
原因
才发现是因为页面中的html或者body元素设置了overflow:auto样式才无法出发
解决方式:在页面结构布局完整的情况下将改样式去掉。
关于
window
.
scroll
系列方法汇总 & 滚动到指定元素位置
1.
window
.
scroll
()
滚动窗口至文档中的特定位置。
window
.
scroll
(x-co
$(
window
).
scroll
(function () {
// 滚动条距离顶部的距离 大于 200px时
if ($(
window
).
scroll
Top() >= nowPageNo * (nowPageNo * 100)) {
console.log('距离大于200')
console.log(stopPage)
if (stopPage .
2、在配置@
scroll
同时在mounted加上一下方法
mounted(){
window
.addEventListener('
scroll
',this.loadMore,true)
3、loadMore方法可以自己定义
loadMore: function (e) {
console.log(e)
4、通过以上可以顺利监听滚动条监听事件
document.body.
scroll
代替
window
.
scroll
来滚动页面
window
.on
scroll
不响应,换成document.body.
scroll
,同样不响应,网上搜索后,得知是body的高度设为了100%导致的,去掉即可。但是如果页面样式依赖于body的高度,这种办法就不好了
最后通过document.body.addEventListener绑定事件解决了(原来是通过document.body.on
scroll
绑定的)
| Groovy Version: 2.4.6
| JVM Version: 1.7.0_80
------------------------------------------------------------------------------
--------------------------------------
很奇怪对不对,为什么官网 ,w3c复制下来的全部没用,
原因
是什么!字母漏打,字符中英文打错吗? 作为一个菜鸟,我也不知道为啥,我也是第一次遇见!但是我比一般的菜鸟好一点,因为我有大牛带路。
其实,当你发现没有其他问题可以找的时候,就应该想想为什么执行不了,为什么不能执行
原因
一般是 写函数的过程遇到
1. 少字符
2. 错中英文符号
3. 运用方式有问题(
js
jq运用方式有问题)一种
这个是我在项目中遇到,$(
window
).
scroll
()当我在使用这个事件方法的时候竟然不能响应,很是郁闷,后来才发现是
css
样式影响到了,废话少说,直接上代码
这个是我在
js
中使用的
$(
window
).
scroll
(function (event) {
console.log(event);
下面是我修改之前的
css
样式:
body {
text-a
滚动条事件很常见。但有的时候竟会无法触发这个事件,或者第一次触发随后不触发!
首先我们看,$(
window
).
scroll
(),是
window
的滚动,
window
代表的是当前窗口,但是如果我们把html和body设置了
width:100%;height:100%;
则无法$(
window
).
scroll
的滚动条事件。
还有它的父标签也不能高度限制!
因为兼容性问题
scroll
Top 被卷去的头部
它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离怎么得到
scroll
Top
window
.on
scroll
= function() { 页面滚动语句 }
1.谷歌浏览器 和没有声明 DTD : document.body.
scroll
Top;
2.火狐 和其他浏览器 (就是document.html.
scroll
to
解释代码:components: { navBar, swiper }, async mounted() { const token = getLocal('token') if (token) { this.isLogin = true }
window
.addEventListener('
scroll
', this.page
Scroll
) Toast.loading({ message: '加载中...', forbidClick: true }); const { data } = await getHome() this.swiperList = data.carousels this.newGoodses = data.newGoodses this.hots = data.hotGoodses this.recommends = data.recommendGoodses Toast.clear() }, methods: { page
Scroll
() { let
scroll
Top =
window
.pageYOffset || document.documentElement.
scroll
Top || document.body.
scroll
Top
scroll
Top > 100 ? this.header
Scroll
= true : this.header
Scroll
= false }, goToDetail(item) { this.$router.push({ path: `product/${item.goodsId}` }) } } } </script>
CSDN-Ada助手:
通过CSS样式缩放图片导致图片模糊的解决方案
qq_30002781:
在Vue中使用jsPdf设置半透明水印
SCscHero:
关于使用flex布局的下父元素自适应宽度,子元素长度超出父元素宽度的一个解决方法
MINO吖: