首页 大杂烩正文

JS垂直以及垂直滚动条准确定位居中某一风格

原创
小哥 3年前 (2022-11-14) 阅读数 85 #大杂烩

首先查看水平滚动条。

我将谈谈我用来实现这种效果的想法。

  1. 使用位置 左侧距离 / 总div距离 * 滚动条宽度 = 滚动条左侧距离（错误）
    上述陈述是错误的，因为错误地判断滚动条滚动距离不是元素。offsetLeft
  2. 通过元素的offsetLeft直接分配给滚动条。ScrollLeft， 发现定位效果已经实现，但它不是居中的，而是最左边的顶部。为了达到中心，我们需要做一个小手术。

先看HTML绑定的详细信息：


    

      
      
      


        


这已经是一出完美的戏了


垂直滚动条定位


    

  1. 本文有两种情况， 一个是只有一个window另一个不仅仅是滚动条。window为了定位滚动条，table中还有为了定位滚动条，也是要求居中
    2. 



在这里，我直接为两个滚动条的链接和定位编写了最麻烦的代码。



从图中可以看出，rable滚动条，window滚动条居中更麻烦。


html：


绑定了两个标签，一个是父标签div， 计算与页面顶部的距离， 另一个是table算table距离div与顶部的距离消失了， 是两个工具属性，因为需要引入这些元素才能精确定位。


js处理：

我写了很多评论，如果还有我无法理解的评论，我可以在评论区留言。


 // 定位最后一个任务位置
    lastTask() {
      // 每个元件的固定高度
      const itemHeight = 47;
      // 表头高度
      const tableHeader = 59;
      // tab标签高度
      const tabHeight = 40;
      // table 距父标签的高度
      const tableOffsetHeight = this.$refs.multipleTable.$el.offsetTop;
      // 包含table和tab的父标签mytask与页面顶部的距离，不包括页面顶部的固定条
      const myTaskOffsetTop = this.$refs.myTask.offsetTop;
      // 浏览器内部高度
      const { innerHeight } = window;
      // 这里只知道他是第一个27元素很好
      const response = {
        location: 27,
        pageNum: 3,
      };
      const { location } = response;
      // 到第一个table元素的高度
      const topToTabHeight = myTaskOffsetTop + tabHeight + tableOffsetHeight;
      const tableBodyHeight = this.tableHeight - tableHeader;
      // table可以显示的数字
      const showNum = tableBodyHeight / itemHeight;
      // 元素距父容器的高度。, 居中＋半个item高度
      const itemOffsetTop = itemHeight * (location + 0.5);
      // 计算table滚动条应位于的高度
      const tableScrollTop = itemOffsetTop > tableBodyHeight / 2
        ? itemOffsetTop - tableBodyHeight / 2
        : 0;
      // 浏览器滚动高度 = 默认滚动table头部 +
      // (只要窗口尺寸较小table高度，然后是位移 (table总高度 - 窗口高度) 除以 2 后 重新放置标头的距离居中。)
      let windowScrollTop = innerHeight > this.tableHeight
        ? topToTabHeight : topToTabHeight + (this.tableHeight - innerHeight) / 2 + tableHeader;
      if (this.total - location < showNum / 2) {
        // 多加0.5数据以精确居中
        windowScrollTop += ((showNum / 2) - (this.total - location) + 0.5) * itemHeight;
      }
      if (location < showNum / 2) {
        // 多减0.5数据以精确居中
        windowScrollTop -= ((showNum / 2) - location - 0.5) * itemHeight;
      }
      this.taskLocation = location;
      // 定位table body滚动条的高度
      this.$refs.multipleTable.bodyWrapper.scrollTop = tableScrollTop;
      // 浏览器滚动条定位
      // 因为这里父组件是父组件，所以需要使用它。eventbus传值
      this.$bus.$emit(scrollLocation, windowScrollTop);
    },


效果如图所示：

项目目前无法启动。


也就是说，无论窗口被按下多小，它都可以精确地定位到中心位置。
								

					
版权声明


所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

				

							

			

				上一篇：Junit4测试踩坑彼身				下一篇：解决操作el-input的number类型使用中文光标上移的原因			

		

		
		

			
相关文章

			
		
			

	
	


	    	
		

			
最新文章

			
		




	
标签列表
粤ICP备19068341号
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除
Powered By Z-BlogPHP Theme By 编程老白