草庐IT

javascript - 为什么在添加 "overflow: auto"时拖放更顺畅？

coder 2024-07-23 原文

我正在为网站制作 CMS。在 CMS 中，我想创建一个可以拖/放/选择的索引。

在占位符上拖放并不是很流畅。但是在我将 overflow: auto 添加到可以拖/放/选择的 div 之后，它会更流畅，更容易使用。

谁能解释一下为什么会这样？

它仅在您的网页中有很多 div 时显示。 (就像在一个即将完成的网站中一样。) 这发生在 Chrome 和 Firefox 中。 (我没有在其他浏览器中测试它。)

With overflow auto <-->

Without overflow auto <-->

最佳答案

您必须考虑 HTML 元素。每个 HTML 元素都包装在自己的“盒子”中。对于每个框，您可以设置其 CSS 属性，如 height、width、margin、padding 等.每个框都设计为随内容扩展，即使您为其设置了高度。此状态称为 overflow: visible; 并且是每个元素的默认状态。

在您的例子中，您正在将一个元素内的元素拖动到另一个元素。让我们稍微分解一下。在我们开始拖动之前，我们的元素存在于另一个元素中，也继承了它的属性。子元素将尽最大努力适应父元素。当我们拖动子元素时，jQuery是让子元素脱离父元素，不再继承父元素的属性。子元素的内容现在将扩展到它自己的 CSS 属性，直到您将它拖到另一个父元素中，此时它将继承新父元素的属性。

就像子元素受父元素影响一样，父元素也会受到子元素的影响。毕竟，它的默认值是 overflow: visible; 并且想要显示其中包含的所有内容。因此，如果父项在 width 中为 100px，而子项为 200px，则子项将在 100px 内可见超出父级的原始大小。

由于设计者希望将我们的元素包含到一个固定大小，无论是 px 值还是基于父元素的 % 分数，所以我们需要一种方法来防止子元素溢出到我们的父元素之外。这是 CSS overflow: hidden;、scroll; 和 auto; 发挥作用。我确实想指出，有 overflow-x 和 overflow-y 属性，但是，我不会过多地介绍它们，因为它们不言自明。 Overflow: hidden; 将简单地隐藏将溢出到父元素之外的内容。此选项不会为用户提供滚动条以查看溢出的内容。所以 Overflow: Scroll 显示滚动条，以便用户可以滚动并查看父元素中隐藏的溢出内容。此选项将始终显示垂直和水平滚动条。注意:这就是为什么有 overflow-x 和 overflow-y 属性的原因，但是对于 overflow: auto;，它们不是必需的。

Overflow: auto; 是只为内容提供必要的滚动条的解决方案，作为奖励，如果内容没有溢出，则不会显示滚动条。因此，当我们查看您的 div.sortobject 时，如果没有 overflow: auto;，它将尝试在视觉上拉伸(stretch)以适合其子元素。当您开始四处拖动元素时，潜在的父 div 会在视觉上溢出，试图同时调整子元素和 jQuery 辅助元素的大小，该元素向用户显示要放置内容的位置。设置 overflow: auto; 将导致父元素始终保留其设置的 width 和 height，这样当您拖动子元素时，它将顺利出现，因为没有潜在的父元素正在调整大小。 jQuery 喜欢计算它影响的元素的当前精确尺寸，并且还会改进动画。

我希望这能提供一些见解。

关于javascript - 为什么在添加 "overflow: auto"时拖放更顺畅？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22191793/

顺畅javascriptcodeoverflowsectionjquerycss

有关javascript - 为什么在添加 "overflow: auto"时拖放更顺畅？的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  3. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  4. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  5. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  6. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  7. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  8. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  9. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  10. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

随机推荐