前端:横向滚动条,拖动进行左右滚动(含隐藏滚动条)

效果

image preview

 代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>横向滚动条,选择隐藏滚动条</title><style>ul {list-style-type: none;display: flex;border: 1px solid red;width: 200px;padding: 0px;margin: 5%;user-select: none;overflow-x: auto; /* 添加横向滚动 */white-space: nowrap; /* 防止标签换行 *//* 禁止文字复制 */}/* 隐藏Webkit浏览器的滚动条 *//* ul::-webkit-scrollbar {display: none; } */li {border: 1px solid black;padding: 10px;margin: 10px;}</style></head><body><ul id="tabsContainer"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><script>var tabsContainer = document.getElementById('tabsContainer');var isMouseDown = false;var startX = 0;var scrollLeft = 0;tabsContainer.addEventListener('mousedown', function (e) {isMouseDown = true;startX = e.pageX - tabsContainer.offsetLeft;scrollLeft = tabsContainer.scrollLeft;});tabsContainer.addEventListener('mouseleave', function () {isMouseDown = false;});tabsContainer.addEventListener('mouseup', function () {isMouseDown = false;});tabsContainer.addEventListener('mousemove', function (e) {if (!isMouseDown) return;e.preventDefault();var x = e.pageX - tabsContainer.offsetLeft;var walk = (x - startX) * 1; // 调整滚动速度tabsContainer.scrollLeft = scrollLeft - walk;});</script></body></html>

/* 隐藏Webkit浏览器的滚动条 */
ul::-webkit-scrollbar {
        display: none; 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/59933.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode面试经典150题(day 1)

LeetCode是一个免费刷题的一个网站&#xff0c;想要通过笔试的小伙伴可以每天坚持刷两道算法题。 接下来&#xff0c;每天我将更新LeetCode面试经典150题的其中两道算法题&#xff0c;一边巩固自己&#xff0c;一遍希望能帮助到有需要的小伙伴。 88.合并两个有序数组 给你两个…

SQL语法与DDL语句的使用

文章目录 前言一、SQL通用语法二、DDL语句1、DDL功能介绍2、DDL语句对数据库操作&#xff08;1&#xff09;查询所有数据库&#xff08;2&#xff09;查询当前数据库&#xff08;3&#xff09;创建数据库&#xff08;4&#xff09;删除数据库&#xff08;5&#xff09;切换数据…

Windows 桌面运维及安全管理

什么是桌面运维 桌面运维是IT管理的重要部分&#xff0c;是一种系统管理的技术&#xff0c;它的主要目的是通过管理用户、计算机和其他设备来提高组织的效率。它不仅能够降低维护成本&#xff0c;而且还能够提高系统的可用性。 如今随着企业设备越来越丰富&#xff0c;桌面运…

SpringBoot Mybatis 多数据源 MySQL+Oracle

一、背景 在SpringBoot Mybatis 项目中&#xff0c;需要连接 多个数据源&#xff0c;连接多个数据库&#xff0c;需要连接一个MySQL数据库和一个Oracle数据库 二、依赖 pom.xml <dependencies><dependency><groupId>org.springframework.boot</groupId&…

AI 绘画Stable Diffusion 研究(十七)SD lora 详解(上)

大家好&#xff0c;我是风雨无阻。 本期内容&#xff1a; Lora的原理是什么&#xff1f;Lora如何下载安装&#xff1f;Lora如何使用&#xff1f; 大家还记得 AI 绘画Stable Diffusion 研究&#xff08;三&#xff09;sd模型种类介绍及安装使用详解 这篇文章中&#xff0c;曾简…

Apache POI 以及 导出Excel表

一、Apache POI 1、介绍 Apache POI 是一个处理Miscrosoft Office各种文件格式的开源项目。简单来说就是&#xff0c;我们可以使用 POI 在 Java 程序中对Miscrosoft Office各种文件进行读写操作。 一般情况下&#xff0c;POI 都是用于操作 Excel 文件。 2、Apache POI 怎么…

android java 硬编码保存mp4 jni数据转换

目录 java imagereader编码保存 java NV21toYUV420SemiPlanar 编码保存视频用&#xff1a; imageReader获取nv21 jni NV12toYUV420SemiPlanar函数&#xff1a; 代码来自博客&#xff1a; 【Android Camera2】彻底弄清图像数据YUV420_888转NV21问题/良心教学/避坑必读!_yuv…

windows安装Scala

Windows安装Scala 下载地址&#xff1a;https://downloads.lightbend.com/scala/2.11.11/scala-2.11.11.zip 解压完成之后 配置环境变量

《Understanding Black-box Predictions via Influence Functions》笔记

[1] 通过升权&#xff08; 2.1 \S 2.1 2.1&#xff09;、扰动&#xff08; 2.2 \S 2.2 2.2&#xff09;两种方式研究某个 training point z ( x , y ) z(x,y) z(x,y) 对&#xff08;优化后的&#xff09;模型参数 θ ^ \hat\theta θ^、模型在某个 test point z test ( …

kafka+Kraft模式集群+安全认证

Kraft模式安全认证 前章内容聊到了Kafka的Kraft集群的配置及使用。本篇再来说说kafka的安全认证方面的配置&#xff0c;。 Kafka提供了多种方式来进行安全认证&#xff0c;包括身份认证、授权和加密传输。一些常用的Kafka安全认证方式&#xff1a; SSL/TLS&#xff1a;使用S…

Docker技术--Docker镜像管理

1.Docker镜像特性 ①.镜像创建容器的特点 Docker在创建容器的时候需要指定镜像,每一个镜像都有唯一的标识:image_id,也可也使用镜像名称和版本号做唯一的标识,如果不指定版本号,那么默认使用的是最新的版本标签(laster)。 ②.镜像分层机制 Docker镜像是分层构建的,并通过…

科学干、科学管、科学抓质量讲座笔记

讲座来源&#xff1a;任占勇老师分享 航空工业技术研究所 文章目录 1. 质量的发展质量发展的阶段&#xff1a;2. 质量问题的类型3. 设计和制造的关系4. 质量谁负责&#xff1f;5. 质量&#xff1f;6.抓、干、管&#xff1f;6.1 抓&#xff1a;全员的质量保证能力建设&#xff0…

【UniApp开发小程序】小程序首页完善(滑到底部数据翻页、回到顶端、基于回溯算法的两列数据高宽比平衡)【后端基于若依管理系统开发】

文章目录 说明细节一&#xff1a;首页滑动到底部&#xff0c;需要查询下一页的商品界面预览页面实现 细节二&#xff1a;当页面滑动到下方&#xff0c;出现一个回到顶端的悬浮按钮细节三&#xff1a;商品分列说明优化前后效果对比使用回溯算法实现ControllerService回溯算法 优…

使用 Netty 实现群聊功能的步骤和注意事项

文章目录 前言声明功能说明实现步骤WebSocket 服务启动Channel 初始化HTTP 请求处理HTTP 页面内容WebSocket 请求处理 效果展示总结 前言 通过之前的文章介绍&#xff0c;我们可以深刻认识到Netty在网络编程领域的卓越表现和强大实力。这篇文章将介绍如何利用 Netty 框架开发一…

LeetCode——回溯篇(二)

刷题顺序及思路来源于代码随想录&#xff0c;网站地址&#xff1a;https://programmercarl.com 目录 131. 分割回文串 93. 复原 IP 地址 78. 子集 90. 子集 II 491. 递增子序列 131. 分割回文串 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个…

基于非洲秃鹫算法优化的BP神经网络(预测应用) - 附代码

基于非洲秃鹫算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于非洲秃鹫算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.非洲秃鹫优化BP神经网络2.1 BP神经网络参数设置2.2 非洲秃鹫算法应用 4.测试结果&#xff1a;5…

实现带头双向循环链表

&#x1f308;带头双向循环链表 描述&#xff1a;一个节点内包含两个指针&#xff0c;一个指向上一个节点&#xff0c;另一个指向下一个节点。哨兵位指向的下一个节点为头节点&#xff0c;哨兵位的上一个指向尾节点。 结构优势&#xff1a;高效率找尾节点&#xff1b;高效率插入…

度矩阵、邻接矩阵

度矩阵&#xff08;degree matrix&#xff09; 度矩阵是对角阵&#xff0c;对角上的元素为各个顶点的度&#xff0c;顶点vi的度表示和该顶点相关联的变得数量。 在无向图中&#xff0c;顶点vi的度d(vi)N(i)&#xff08;即与顶点相连的边的数目&#xff09;有向图中&#xff0…

【力扣】55、跳跃游戏

var canJump function(nums){let cover 0;for(let i0;i<nums.length;i){if(i<cover){cover Math.max(nums[i]i,cover);if(cover >nums.length-1){return true;}}}}

stm32之DS18B20

DS18B20与stm32之间也是通过单总线进行数据的传输的。单总线协议在DHT11中已经介绍过。虽说这两者外设都是单总线&#xff0c;但时序电路却很不一样&#xff0c;DS18B20是更为麻烦一点的。 DS18B20 举例&#xff08;原码补码反码转换_原码反码补码转换_王小小鸭的博客-CSDN博客…