jQuery居中元素scrollleft计算方法示例


Posted in Javascript onJanuary 16, 2017

本文实例讲述了jQuery居中元素scrollleft计算方法。分享给大家供大家参考,具体如下:

如果需要将某个元素 在可以滚动元素(scroll)中设置为居中计算方法为:

需要的scrollleft + 普通居中时候的offsetLeft
= 当前的scrollleft+当前元素的offsetLeft
= 固定的当前元素在整个滚动条中距离左边的位置

DEMO示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="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>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
关于js获取radio和select的属性并控制的代码
May 12 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
JavaScript 函数的执行过程
May 09 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 #Javascript
JavaScript日期选择功能示例
Jan 16 #Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 #Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 #Javascript
Node.js中用D3.js的方法示例
Jan 16 #Javascript
JavaScript实现的select点菜功能示例
Jan 16 #Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 #Javascript
You might like
php下载文件,添加响应头的简单实例
2016/09/22 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python编写屏幕截图程序方法
2015/02/18 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
Django中的AutoField字段使用
2020/05/18 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
super关键字的用法
2012/04/10 面试题
HSRP的含义以及如何工作
2014/09/10 面试题
周年庆典邀请函范文
2014/01/23 职场文书
学生手册家长评语
2014/02/10 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
小学优秀班主任材料
2014/12/17 职场文书
公司感谢信范文
2015/01/22 职场文书
民事辩护词范文
2015/05/21 职场文书
党支部对转正的意见
2015/06/02 职场文书
联村联户简报
2015/07/21 职场文书
计算机教师工作总结
2015/08/13 职场文书
Django与数据库交互的实现
2021/06/03 Python
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL