当前位置： 首页 > news >正文

前端：横向滚动条，拖动进行左右滚动（含隐藏滚动条）

news 2026/2/2 20:18:04

效果

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; 
} 

相关文章：

前端：横向滚动条，拖动进行左右滚动（含隐藏滚动条）

效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, i…...

编程日记 2023/8/31 4:03:38

Android JNI Bitmap指定颜色值替换

#include <jni.h> #include <string> #include <android/bitmap.h> #include <cmath> #include <android/log.h> //定义TAG之后&#xff0c;我们可以在LogCat通过TAG过滤出NDK打印的日志 #define TAG "BitmapOperationNative" // 定义…...

编程日记 2023/8/31 4:02:36

测试理论与方法----测试流程的第四个步骤：执行测试，提出缺陷

8、执行测试—–>提交缺陷报告 测试流程&#xff1a;执行测试—–>提交缺陷报告 1、缺陷的概述&#xff08;回顾&#xff09; 结果角度&#xff1a;实际结果和预期结果不一致 需求角度&#xff1a;所有不满足需求或超出需求的&#xff0c;都是缺陷 2、缺陷的相关属性…...

编程日记 2023/8/31 4:01:32

Stable Diffusion 提示词入门指南

前言 本文主要讲解 Stable Diffusion &#xff08;下文简称 SD&#xff09;提示词的用法&#xff0c;帮助大家生成更高质量的图片 本章节主要讲解文生图&#xff0c;其他类型读者可以自行探索。同时本文主要是以 Stable Diffusion Discard 的形式生成图片 如果各位对于图片隐…...

编程日记 2023/8/31 4:00:31

基于鹰栖息算法优化的BP神经网络（预测应用） - 附代码

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

编程日记 2023/8/31 3:59:29

想要搞懂接口测试和功能测试有什么区别，那就必须知道他们的基本原理

本文主要分为两个部分&#xff1a; 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什么要做&#xff1f; 第二部分&#xf…...

编程日记 2023/8/31 3:58:27

Spring: HiddenHttpMethodFilter的用法

作用&#xff1a;将html表单提交的post请求转换为put请求或delete请求发给接口。 html不支持put和delete. 一、web.xml中配置过滤器 <filter><filter-name>HiddenHttpMethodFilter</filter-name><filter-class>org.springframework.web.filter.HiddenH…...

编程日记 2023/8/31 3:57:24

Vue入门学习（一）

一、Vue环境搭建及第一个Demo 1.1编程工具&#xff1a; 下载Vscode,并安装插件 在Extensions 选项中搜索插件&#xff1a; 1&#xff1a;Live Server&#xff1a;将当前项目作为根路径&#xff0c;启动一个服务端&#xff0c;这样右键就会有如下选项 2&#xff1a;Eclipse …...

编程日记 2023/8/31 3:56:23

软考：中级软件设计师:无线网，网络接入技术，ipv6

软考&#xff1a;中级软件设计师:无线网 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准备的 &#x…...

编程日记 2023/8/31 3:55:21

dart 学习 之 同步生成器（sync*）和 异步生成器（async*）

同步生成器&#xff08;sync*&#xff09;和异步生成器&#xff08;async*&#xff09;都是 Dart 中用于逐步产生多个值的生成器类型&#xff0c;但它们之间有一些重要的区别&#xff1a; 执行方式&#xff1a; 同步生成器&#xff08;sync*&#xff09;&#xff1a; 同步生成器…...

编程日记 2023/8/31 3:54:19

JSX基础

1. JSX介绍 概念&#xff1a;JSX是 JavaScript XML&#xff08;HTML&#xff09;的缩写&#xff0c;表示在 JS 代码中书写 HTML 结构 作用&#xff1a;在React中创建HTML结构&#xff08;页面UI结构&#xff09; 优势&#xff1a; 采用类似于HTML的语法&#xff0c;降低学习成…...

编程日记 2023/8/31 3:53:14

Linux Day11---mbash项目（二）

观看本文之前请先阅读Linux Day10的相关内容 1.touch 1.1 open系统调用 int open(const char*path,int oflags,mode_t mode); oflags参数&#xff1a; O_APPEND:把写入数据追加在文件的末尾 O_TRUNC:把文件长度设置为0&#xff0c;丢弃已有的内容 O_CREAT:如果需要&#…...

编程日记 2023/8/31 3:52:13

回归预测 | MATLAB实现IBES-ELM改进的秃鹰搜索优化算法优化极限学习机多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现IBES-ELM改进的秃鹰搜索优化算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现IBES-ELM改进的秃鹰搜索优化算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图…...

编程日记 2023/8/31 3:51:12

【Golang】go条件编译

交叉编译只是为了能在一个平台上编译出其他平台可运行的程序&#xff0c;Go 作为一个跨平台的语言&#xff0c;它提供的类库势必也是跨平台的&#xff0c;比如说程序的系统调用相关的功能&#xff0c;能根据所处环境选择对应的源码进行编译。让编译器只对满足条件的代码进行编译…...

编程日记 2023/8/31 3:50:11

学习创建第一个 React 项目

目标 本篇的目标是配置好基础的环境并创建出第一个 React 项目。 由于之前没接触过相关的知识&#xff0c;所以还需要了解其依赖的一些概念。 步骤主要参考First React app using create-react-app | VS code | npx | npm - YouTube 0. 简单了解相关概念 JavaScript 一种语…...

编程日记 2023/8/31 3:49:08

使用Python构建网络爬虫：提取网页内容和图片资源

网络爬虫是一种自动获取网页内容的程序&#xff0c;它可以帮助我们高效地收集网络上的有价值信息。本文将介绍如何使用Python构建网络爬虫&#xff0c;提取网页内容和图片资源。 　　一、环境准备 　　1.安装Python环境 　　首先&#xff0c;确保您已经安装了Python环境。访问P…...

编程日记 2023/8/31 3:48:06

推荐两款开源的绘制流程图软件

一句话导读 目前流程图绘制软件非常多&#xff0c;包括本机安装的、web端的都有&#xff0c;如Visio、Graphviz、processOn等等。但是几乎都是收费的。本文给大家介绍两款优秀的开源免费的流程图绘制软件。 目录 一句话导读 一、draw.io 二、Meta2d.js ​1.为什么使用 2.…...

编程日记 2023/8/31 3:47:04

echarts画一个简单的饼图 中间是空的 环有两种颜色一种是底色 一种是百分比的颜色

//dom打印出来大概是什么样子下方有个图可以作为参考 ecInit(correctRate, processAnalysisVO.correctRate, (100-processAnalysisVO.correctRate));//如效果图//饼图 function ecInit(dom, correctRate, errorRate) {var dom dom; //就是你要放入的盒子元素var myChart ech…...

编程日记 2023/8/31 3:46:03

5 群起集群

1.在启动集群之前&#xff0c;先配置workers,有几个节点就配置几个 [atguiguhadoop102 hadoop]$ vim /opt/module/hadoop-3.1.3/etc/hadoop/workers在该文件中增加如下内容&#xff1a; hadoop102 hadoop103 hadoop104 注意&#xff1a;该文件中添加的内容结尾不允许有空格&a…...

编程日记 2023/8/31 3:45:01

前端传参对象套对象的格式,后端进行解析并存入数据库

项目场景&#xff1a; 在一些小程序中会涉及到一个表单中的一个数组对象中夹杂着另一个对象数据,这个被夹杂的数据是from表单内的一组单选或者双选这样的数据,前端转为json对象之后传到后端进行解析 问题描述 首先传进来的对象是这样的格式的 abc:{"a":"0&quo…...

编程日记 2023/8/31 3:43:59

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2026/1/30 0:00:28

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/11/30 10:30:15

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2026/2/1 3:20:44

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/1/26 20:04:23