拖拽事件导致滚动条变形？

最新推荐文章于 2023-11-23 18:26:33 发布
最新推荐文章于 2023-11-23 18:26:33 发布
阅读量210 收藏
点赞数
分类专栏： 问题解决 文章标签： 拖拽事件 滚动条变形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mark_gsd/article/details/90486321
版权

在一个div中有一个可放大缩小的图片，放大后需要能拖拽，此时就需要用到拖拽的功能，但是发现拖拽后滚动条变形了，发现拖拽图片和拖拽外层的滚动条原理是不一样的，此时可以尝试将设置left，top等属性直接设置scrollTo，其他原理基本一致

mark_gsd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS如何设置滚动条样式？.docx
11-22
2. `::-webkit-scrollbar-thumb`：选择器用于设置滚动条滑块（即用户可以拖动的部分）的样式。 3. `::-webkit-scrollbar-track`：选择器用于设置滚动条轨道的样式。 4. `::-webkit-scrollbar-thumb:hover` 和 `::-...
移动端元素移动导致的页面滚动问题（滚动穿透）
nnni
07-21 986
引 需求要做个功能，页面上的一个小图标从固定变成可移动。一把梭哈后，在PC上显示没有问题，移动的可欢快了，但是到了手机里以后出现了“联动问题”。 所以，当元素移动的时候，页面也会出现上下的滚动，这样的体验是超级差的。 解决方案 document.addEventListener('touchstart', function(e){ console.log('开始移动'); const scrollTop = document.body.scrollTop || document.
jq实现拖拽功能-解决滚动条引起的偏差
qq_42961150的博客
03-07 1291
最近在做拖拽功能的时候，在网上找了一些示例代码，示例代码都是大同小异，我发现代码并不完整，仅仅实现了拖拽功能，并未考虑到页面有滚动条时候的拖拽，还未考虑到拖出边界后可能会出现的bug。下面来做个简单分析和解决思路
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
10-10 1695
【代码】【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动。
移动端开发touchmove事件preventDefault引发页面不能滚动问题
AlexS Blog
03-07 10000
项目中，用到了一个可在页面中的拖拽小图标，由于拖动过程中不能引发页面的拖动@touchmove事件对应函数中加入： document.addEventListener("touchmove",this.preventDefault,false); preventDefault(e) { e.preventDefault(); } 但实际拖动之后，发现长页面上下也无法拖动...
react-grid-layout 拖拽元素时滚动条不能跟随
weixin_43170484的博客
10-18 663
在使用react-grid-layout拖拽元素时出现了滚动条不能跟随拖拽元素滚动的问题，在百度和google上都没有搜索到原因，后经过和官方案例的debug，发现是样式多了一个user-selector:none 属性造成的
VC++如何使用滚动条控件？源码例子下载
03-15
摘要:VC/C++源码,界面编程,...源码例子下载，本例通过滚动条调整颜色为例，演示代表红、绿、蓝三基色的滚动条在拖动时如果动态取值、赋值，从而适时动态改变颜色值，这再VC++应用中是想当常见的一个滚动条应用实例。
WPF拖动DataGrid滚动条时内容混乱的解决方法
12-30
在WPF中，如果DataGrid里使用了模板列，当拖动滚动条时，往往会出现列表内容显示混乱的情况。解决方法就是在Binding的时候给UpdateSourceTrigger赋值。 <RowDefinition Height=25></RowDefinition> ...
datagridview 自定义滚动条
12-17
2. **滚动条事件**：需要监听Scroll事件，以便在滚动时更新数据显示。这通常涉及到计算和设置GridView的VisibleBounds，以确保正确显示数据。 3. **用户交互**：自定义滚动条需要处理鼠标点击和拖动事件，以实现...
滚动条效果+鼠标滚轮事件+拖拽-完善.html
04-11
滚动条效果
H5图像扭曲、自由拉伸实现代码
12-15
canvas+javascript+openGL对图片进行自由拉伸，变形。
拖动div 内部有滚动条
10-16
拖动div 内部有滚动条
react列表手势触摸拖拽元素和滚动条冲突问题
最新发布
qq_25757181的博客
11-23 364
1.场景：列表支持手势touch触屏，列表支持手指上下（或左右）滑动进行滚动，手指点击listItem元素可拖拽元素。3.解决方案：300毫秒以内，判断用户手势滑动角度判断用户手势滑动是横向滑动操作类型：拖拽事件、滚动条事件两种类型。垂直方向：在不可取的方向上进行滑动，执行y轴方向滚动事件；3.2 x轴有滚动条例子：和y轴方向处理方案相反。2.问题：滚动条事件和手势touch事件冲突。水平方向：在可取范围手指拖动，执行拖拽事件。这样就能避手势触摸滑动和滚动条事件冲突问题。
拖拽排序插件Sortable.js在拖动的时候不能滑动鼠标滚轮滚动屏幕的问题
wb121017405的博客
08-03 4527
只是一个小问题 在使用sortable.js的时候遇到拖动的时候不能滑动鼠标滚轮控制滚动条，找了很多地方，也看了文档，原来是没有找到那个点： forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in 就这样一个属性，具体什么也不太清楚，加上去了之后拖动的元素就不能离开浏...
移动端使用vuedraggable实现拖拽排序
Julia_0502的博客
11-16 1239
移动端使用vuedraggable实现拖拽排序。
随页面滚动改变定位的tab菜单
bury_的博客
02-27 5567
实现效果及完整代码：https://lucyzlu.github.io/Web/toTop.html 1.导航菜单功能 在页面滚动时导航菜单始终显示在视口内，以便用户在浏览时可以随时点击导航菜单链接到别的页面查看样例。 我觉得这里之所以要特别把导航菜单做成这样，是因为这个页面是基本样例的展示，文档本身高度比较大，且用户一般不会从头到尾仔细看文档，很可能中途就要跳转到其他页面，因此让用户随...
滚动条出现，挤压页面宽度，导致布局错乱的三种解决方法
热门推荐
qq_36132291的博客
04-21 1万+
出现原因 页面内容超出高度，浏览器出现滚动条的时候，因为滚动条是占位的，所以页面会被挤压，导致页面内容出现错乱。 解决方案一：新属性 overlay （目前仅chrome支持） chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 解决方案二：margin-right: calc(100%
滚轮事件和拖动滚动条和键盘事件
zhumizhumi的博客
07-11 5788
一、鼠标的滚轮事件 触发: 鼠标的滚轮上下滑动的时候触发 代码: // DOMMouseScroll:火狐 // onmousewheel:其他浏览器 if(window.addEventListener){ window.addEventListener('DOMMouseScroll',wheel,false) } window.onmousewheel = document['onmousewheel'] = wheel function wheel(event){ console.log(
内容超出div导致拖动滚动条div背景变白
05-25
这个问题可能是由于 CSS 样式设置不正确造成的。你可以尝试添加以下 CSS 样式，看看是否能够解决： ``` div { overflow: auto; /* 让 div 具有滚动条 */ background-color: #ffffff; /* 设置 div 背景色为白色 */ } ``` 如果仍然出现问题，可能需要检查 HTML 结构和其他 CSS 样式，以确定问题所在。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值