使div或img在滚动条滚动时，始终居中在屏幕中间

最新推荐文章于 2023-05-19 14:59:47 发布
最新推荐文章于 2023-05-19 14:59:47 发布
阅读量2.6k 收藏 3
点赞数
分类专栏： css js/jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38084879/article/details/108850143
版权
前端 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
js/jquery
9 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏

直接上代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="format-detection" content="telphone=no, email=no">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
	<title>全球通客户俱乐部</title>
	<!--引入swiper.css 滑动过渡用-->
	<link rel="stylesheet" href="${miscDomain}/static/css/swiper.min.css">
	<!--引入flexible.js rem自适应-->
    <script src="${miscDomain}/static/js/flexible.js"></script>
    <script src="${miscDomain}/static/zinfo/tool.js"></script>
	<!--引入swiper.js-->
	<script src="${miscDomain}/static/js/swiper.min.js"></script>
	<link rel="stylesheet" href="${miscDomain}/static/css/gsm/common.css">
	<link rel="stylesheet" href="${miscDomain}/static/css/gsm/index.css">
	<style rel="stylesheet">
		.national-div{
			margin: 0 auto;
			position: absolute;
			left: 0;
			top: 60px;
			z-index:999;
			margin: 50px;
		}
	</style>
</head>

<body class="index">
	<!--要居中的div和img-->
	<div id="national-div" class="national-div">
		<img src="${mainDomain}/front/static/images/gsm/index/national.png" style="height:100%;width: 100%;">
	</div>
</body>
<script src="${miscDomain}/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(function () {
		//滚动条滚动事件
		$(window).scroll(function() {
			let top = $(window).scrollTop();
			//每次滚动重新设置div的位置
			$("#national-div").css("top",60+top+"px");
		});
	});
  
</script>

</html>

效果图

 

Love_云宝儿
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片宽度为1920，高度固定，不论屏幕宽度变大还是变小，图片始终居中显示
weixin_44431973的博客
05-08 1092
开头咱先来唠唠，需要代码的小伙伴可直接下划~ 想当初组长分给我一个网站任务，作为前端菜鸟的我，刚拿到美工给的切图的时候，一看这首页顶部大图1920*390的尺寸，陷入了沉思。为什么会是这个尺寸？好奇怪哦。再一看设计图，emmm这是要怎么实现？ 害管他那么多，不写高度，只给100%宽度让它自适应就完了，就是这么优秀。虽然跟设计图不太一样，不过应该问题不大。 结果交任务的时候就被组长吐槽了。组长说这是...
移动端-左右滑动列表，点击元素，使元素滚动居中
qq_41154522的博客
08-31 381
移动端-左右滑动列表，点击元素，使元素滚动居中。
让div在页面居中（滚动条滚动时也居中）
稻花香的博客
12-23 1191
【代码】让div在页面居中（滚动条滚动时也居中）
滚动条滚动时 DIV仍居于可视窗口中央
Donnie的专栏
11-08 1250
I'm a dialog                             var cur_window_width=document.documentElement.clientWidth;                var cur_window_height=window.innerHeight||document.documentElement.client
怎么让html滚动字幕居中,CSS设置DIV窗口上下居中无滚动条
weixin_29163581的博客
05-30 1472
前端开发中，免不了居中的需求。对于居中有很多方法，本次介绍一个不用js获取窗口，纯css给div“肉眼上的”上下左右居中，并且没有滚动条的实例。为什么说是“肉眼上的”，可以看看下面的介绍。话不多说，先来感受一下！！！点击图片跳转通过上面一个案例，可以看到无论怎样调整游览器窗口的大小，都不会出现滚动条，div始终在中间。div宽度大于窗口会被隐藏掉如何实现？上面的案例就是利用了CSS的 vertic...
div 添加滚动条
ruirui
03-12 1177
style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis" //让所有的table td都展开   overflow-y: hidden; overflow-x: scroll; width: 987px  //设置竖着没有滚动条，横着有滚动条 ，一定要设置宽度 例子：
JS实现图片的不间断连续滚动
08-14
在CSS样式中，可以调整`#demo`的`text-align`属性为`center`，使图片居中显示。在JavaScript代码中，将`Marquee`函数中的`tab.scrollTop--`改为`tab.scrollTop++`，图片就会从底部向上滚动。 通过这样的方式，我们...
HTML中使背景图片自适应浏览器大小实例详解
08-30
这种方法适用于不希望背景图片跟随滚动条移动的情况。示例代码如下： ```html <div id="Layer1" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;"> <img src=...
jQuery手机端点击弹出层固定居中代码
06-12
/* 添加滚动条，以防内容超出屏幕 */ background-color: rgba(0,0,0,0.4); /* 半透明背景 */ } .modal-content { background-color: #fefefe; margin: 15% auto; /* 居中 */ padding: 20px; border: 1px ...
HTML标签代码大全(DIV+CSS前端开发者的福音).pdf
10-27
而`style`属性则允许直接在标签内添加CSS样式，如`<body style="overflow-y:hidden">`可以隐藏滚动条。 `<marquee>`标签是HTML的一个非标准元素，用于创建滚动文本效果。例如： - `scrollAmount`定义了滚动的速度。...
给大图片添加滚动条
07-20
给大图片添加滚动条
HTML标签代码大全(DIV+CSS前端开发者的福音)定义.pdf
02-15
同时，`style="overflow-y:hidden"`可以隐藏页面的垂直滚动条。 在文本特效中，`<marquee>`标签用于创建滚动文本效果。例如： ```html 啦啦啦，我会移动耶！ ``` `scrollAmount`定义滚动速度，`direction`定义...
页面左右动 、常用标签、文字居中
weixin_34102807的博客
05-12 102
2019独角兽企业重金招聘Python工程师标准>>> ...
从零开始学_JavaScript_系列（23）——css<5>滚动条，Tab，spellcheck，img放置
weixin_33858336的博客
06-03 110
（21）滚动条的美化 for chrome内核： /* 有这行才有效，滚动条的宽度 */ ::-webkit-scrollbar { width: 12px; } /* 滚动条的背景 */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 06px rgba(0,0,0,0...
div包裹相同高度的image出现滚动条
qq_51389137的博客
05-19 273
id为box的div盒子与子元素img的高度相同但是会出现滚动条，margin padding等等都为0.间隙到底哪里来的，应该是img有类似文本一样的属性，在box上加入css代font-size:0就可以了。或者overflow直接设置为hidden。
CSS - 实现横向滚动（横向滚动布局）
热门推荐
王佳斌
08-24 3万+
CSS - 实现横向滚动（横向滚动布局），css横向滚动布局，css实现元素横向滚动的方法css中如何实现横向滚动布局，纯CSS实现横向滚动条，横向不间断滚动DIV CSS代码，纯CSS3横向滚动条实现。
vue 横向滚动条 实现点击 元素滚动可视区域居中 效果
qq_40509733的博客
12-23 3596
模拟vant的Tab标签页的标签滚动效果 效果：选中元素，在滚动条的可视区域里面自动居中，头尾两端不用居中 vant效果：https://youzan.github.io/vant/#/zh-CN/tab start() { /** * 1)先让选中的元素滚到可视区域的最左边 scrollLeft * 2)接着向右移动容器一半的距离 containWidth / 2 * 3)最后向左移动item一半的距离 offsetWi...
实现多个div拖拽移动，交换位置功能，代码复制可运行，有交换特效
Love_云宝儿的博客
08-17 4300
拖动标题行可交换 废话不多说，直接上代码： drag.css #moveBar1{ position: absolute; left:2px; top:2px; width: 250px; height: 300px; background: #666; border: solid 0px #000; opacity: 0.6; ...
基于bootstrap3生成一个div的弹窗样式，要求在屏幕中间居中显示可以滑动滚滚动条或滚轮浏览弹窗内容
最新发布
06-06
可以使用Bootstrap的Modal组件来创建一个中央对齐的弹窗。 首先，在页面中引入Bootstrap的CSS和JS文件： ```html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> ``` 然后，创建一个按钮来触发弹窗： ```html <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开弹窗</button> ``` 接下来，在页面中创建一个Modal的模板： ```html <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">弹窗标题</h4> </div> <div class="modal-body"> <div style="height: 300px; overflow-y: auto;"> <!-- 这里是弹窗的内容 --> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> ``` 需要注意的是，为了让弹窗的内容可以滚动，我们在弹窗内容的外层包裹了一个高度为300px并且设置了overflow-y属性为auto的div。 最后，我们需要在页面底部添加一个JavaScript代码段，用来初始化Modal组件： ```javascript $(document).ready(function(){ $("#myModal").modal({backdrop: "static", keyboard: false}); }); ``` 这样，我们就创建了一个基于Bootstrap3的中央对齐弹窗，并且可以滑动滚动条或滚轮浏览弹窗内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值