居中元素的 scrollleft 的计算方法
如果需要将某个元素 在可以滚动元素（scroll）中设置为居中计算方法为：
需要的scrollleft + 普通居中时候的offsetLeft
= 当前的scrollleft+当前元素的offsetLeft
= 固定的当前元素在整个滚动条中距离左边的位置
DEMO
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="./base/jquery.js"></script><style>ul, li {padding: 0px;margin: 0px;list-style: none;}ul {width: 1000000px;}li {height: 100px;float: left;border: 1px solid red;}li.selected {background-color: yellow;;}</style>
</head>
<body>
<div class="container" id="J_container" style="width: 200px;height: 100px;border:1px solid gray; overflow-x: scroll;overflow-y: hidden;"><ul><li>测试1</li><li>测试1</li><li>测试1</li><li>测试1</li><li>测试1</li><li>测试1</li><li>测试1</li><li class="selected">请将我居中</li><li>测试1</li><li>测试1</li></ul>
</div>
<script>$(function () {var item = $(".selected");var container = $("#J_container");var itemOffset = item.offset();var itemOffsetLeft = itemOffset.left + container.scrollLeft();var centerLeft = ( container.width() - item.width()) / 2;container.scrollLeft(itemOffsetLeft - centerLeft);})
</script>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
居中元素的 scrollleft 的计算方法相关推荐
- javascript中元素的scrollLeft和scrollTop属性说明
这两个属性的适用范围: 注意: 这两个属性只能用于元素设置了overflow的css样式中.否则这两个属性没有任何意义. 且overflow的值不能为visible,但可以为hidden,auto,s ...
- html css 让元素居中显示,html – CSS：如何在居中元素周围对齐元素？
我正在尝试创建一个由三部分组成的简单页面导航: >几个以前的页码(如果有的话) >当前页码(必须居中) >一些即将到来的页码(如果有的话) 重要的是当前页码始终在父容器中水平居中.其 ...
- java 元素居中_如何在ColumnLayout中居中元素
我怎样才能将元素置于 ColumnLayout ? 这是我的qml代码: ApplicationWindow { id: root visible: true width: 640 height: 6 ...
- html div位于居中元素右边,如何居中一个元素（终结版）
原标题:如何居中一个元素(终结版) 作者:前端工匠公号 / 浪里行舟 (本文来自作者投稿)前言 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 一.水平居中 1.行内元素水平 ...
- inline-block中居中元素
<span class="a"><span class="b">luo</span> </span> 有这样一个 ...
- html 绝对位置居中,如何在div中对绝对定位元素进行居中？
响应解 这里有一个很好的解决方案用于响应性设计或未知尺寸总体而言如果你不需要支持IE8和更低的..centered-axis-x { position: absolute; left: 50%; tr ...
- h5海报页面定位中的元素居中
最简结构 <div class="outer"><div class="inner"><span class="cont ...
- HTML元素居中定位与尺寸拉伸
块级元素就是那些自为一行的元素,有高度宽度.行内元素没有高度,行内块级元素有高度,不换行. 好了,下面用几个刚刚试验的例子把这部分知识小记一下,为日后深入学习打基础. 1.水平居中 非块级元素水平居中 ...
- 在使用flex布局方式让最后一个元素居右（最右边）显示，一层 HTML 结构实现左“右”布局，使用flex实现居中对齐
我们在布局的时候通常会在导航栏上有居左和居右显示,中间留白,这样页面伸缩的时候不会影响效果.形如下图 以往我们可能更多会使用float浮动布局来实现这种效果,但是flex得到广泛支持以后就可以更方便和 ...
最新文章
- [转] vuewebpack多页面配置
- python 开发gui浏览器_Python编程之gui程序实现简单文件浏览器代码
- sudo 命令报错的解决方法
- 数字图像处理知识总结
- android按钮变输入框动画,AnimShopButton 仿饿了么加入购物车旋转控件 - 自带闪转腾挪动画 的按钮。自带海量可定制 UI 属性。在 Re @codeKK Android开源站...
- ENSP配置 实例八 三层交换机DHCP配置加VLAN划分实验
- 计算机窗口移动方法有,北京版一年级信息技术上册《操作窗口学本领》教案
- pandas 替换数字列中的字符串
- Java路径问题终于解决方式—可定位全部资源的相对路径寻址
- 1用switch语句从控制台输入100以内的分数判断优秀，良好，及格不及格属于哪一个区间
- C++11 关键字override和final
- 猜数字游戏c语言编程排行榜,C语言程序经典示例—-（7）猜数字游戏
- 象棋名手手机版2019最新版_象棋名手超强版下载
- deepin设置快捷键
- 计算机二级请假条,单位员工病假请假条范文模板
- 计算机高级语言中数据的表现形式
- 暗影精灵开机只亮电源灯_为什么只有惠普暗影精灵看到了电竞人群细分诉求
- Win10玩方舟生存进化崩溃怎么办？
- 【总结】举例说明数据库自增字段的 3 种实现方式
- Java邮箱验证错误收集
热门文章
- 【数据】客户端网游成功率分布
- OA选型之浅谈OA系统试用
- python nltk是什么_Python文本处理nltk基础
- npm intasll 安装报错 Error: EPERM: operation not permitted, mkdir ‘C:\Program Files\nodejs\node_cache\_
- 如何精确统计用户在页面的停留时长？
- 【云原生|K8s系列特别篇】：一文速通实战Helm管理工具
- 代码审计--1--代码审计基础
- Python视频学习（十九、爬虫基础）
- oracle修改时间命令,linux 修改系统时间 oracle查询当前时间命令
- Java教程，Java基础教程，2020年全新Java基础学习教程