分类 javascript 下的文章

先说 ===，这个比较简单：
1、如果类型不同，就[不相等]
2、如果两个都是数值，并且是同一个值，那么[相等]。
3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。
4、如果两个值都是true，或者都是false，那么[相等]。
5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
6、如果两个值都是null，或者都是undefined，那么[相等]。
再说 ==，根据以下规则：
1、如果两个值类型相同，进行 === 比较。
2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
3、如果一个是null、一个是undefined，那么[相等]。
4、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
5、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
6、任何其他组合，都[不相等]。

scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出（滚动）的距离（当前可滚动的页面的总高度）
这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollHeight-scrollTop-windowHeight <=300){
　　}else{
}
});

window.addEventListener('scroll', scroll)
function scroll() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

      if (scrollTop === 0) {
        console.log('滚动到顶了');
      }

 if (scrollTop + clientHeight >= scrollHeight) {
        console.log('滚动到底了');
      }

}

window.removeEventListener('scroll', scroll) // 移除滚动事件

在部分浏览器上，到底部时，触发不了
可以考虑：
1.用offsetHeight代替clientHeight ，多计算边框的距离
2.scrollTop的实时监听值可能是小数，采用Math.ceil(scrollTop),向上取整，避免少那个零点几的距离

何为回弹问题？
回弹问题是指在ios设备上，用户向上或向下滑动内容到达边界时，屏幕会出现弹性回弹的效果。
这种效果在一些情况下可能导致应用的交互不够流畅，用户体验受到影响。特别是一些需要滑动的元素（如长列表、图片轮播等），回弹会分散用户的注意力。

回弹机制的原理
在ios中，回弹效果由内部的ScrollView组件管理。ScrollView会在用户滑动到边界时触发“回弹”行为，这是一个默认的视觉反馈。虽然这种效果在某些情况下新颖独特，但在Web应用中，开发者往往需要根据业务需求来控制这些事件。

禁用回弹的基本方法
我们可以通过css和javascript共同作用来避免ios的回弹效果。

使用css禁止回弹
最简单的方法之一是通过css来禁止回弹。在页面的样式表中，我们可以设置overflow属性和-webkit-overflow-scrolling属性，来消除回弹效果。
body{
height:100%;
margin:0;
overflow:hidden;/禁用全局滚动/
}

.scroll-container{
width:100%;
height:100%;
overflow-y:scroll;/允许纵向滚动/
-webkit-overflow-scrolling:touch;/使用touch滚动/
position:absolute;
top:0;
}
在这个实例中，我们使用了.scroll-container类来包裹需要滚动的内容区域，并禁用了body的全局滚动，避免页面
整体的滚动引起的回弹。

使用javascript处理触摸事件
除了css方法外，我们还可以通过javascript来更精细地控制页面的滚动行为。可以监听触摸事件，并阻止默认行为。
const scrollContainer = document.querySelector('.scroll-container');
//阻止触摸事件的默认行为
scrollContainer.addEventListener('touchstart',function(event){
//Do something on touch start
},{passive:false});

scrollContainer.addEventListener('touchmove',function(event){
event.preventDefault();//禁止默认滚动行为
}，{passive:false});

在此代码中，我们通过监听一个touchmove事件，在事件触发时执行event.preventDefault()来阻止默认的滚动行为。
注意，这里需要监听器的passive选项设置为false，以确保event.preventDefault()生效。

  1. 1
  2. 2
  3. 3