div滚动条上的光标大小调整

Question

div滚动条上的光标大小调整

4

带有光标调整和自动滚动的Html div：

.scrollable {
  cursor: ew-resize;
  border-color: red;
  height: 200px;
  max-height: 150px;
  overflow: scroll;
}

<div class="scrollable">
  <h1>My First CSS Example</h1>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</div>

元素正在显示带有调整大小选项的光标。但是当滚动条可见时，调整大小光标会显示在滚动条内部。如何将调整大小光标显示在垂直滚动条的边框外。

我尝试了以下方法，但都没有成功：

.scrollable { 
  cursor: ew-resize; 
}

请提供您的建议。谢谢。

- Billy

发布了图片，谢谢。 - Billy

1

你能清理一下你的显示器并发布一个标注了你问题的图片吗？ - rwpk9

这是 jsfiddle 链接：https://jsfiddle.net/69bfszdt/ - Billy

我的浏览器（Google Chrome）只在div内容内显示调整大小的光标，而不在填充区域或滚动条上显示。你用哪个浏览器？ - Heiko Theißen

我认为问题不太清楚，您想将光标应用于哪里？是在滚动条的外部还是上面？如果是在外部，您不能只将光标样式放在父级吗？ - Damzaky

显示剩余5条评论

5个回答

0

我不确定这是否是您要求的具体内容。我无法确定您的目标是允许框调整大小还是不允许。如果我的理解是正确的，您的目标是允许调整大小，但您不希望它干扰滚动条。基于此，以下是我最好的答案：

const parent = document.querySelector("#parent"),
      handle = parent.querySelector("#handle")

let startX,
    startWidth
      
handle.addEventListener("mousedown", e => {
  startX = e.clientX
  startWidth = parseInt(document.defaultView.getComputedStyle(parent).width, 10)
  document.documentElement.addEventListener("mousemove", resize, false)
  document.documentElement.addEventListener("mouseup", stopResize, false)
})

function resize(e) {
  parent.style.width = (startWidth + e.clientX - startX) + "px"
}

function stopResize() {
  document.documentElement.removeEventListener("mousemove", resize, false)
  document.documentElement.removeEventListener("mouseup", stopResize, false)
}

#parent {
  border-color: red;
  border-width: 1px;
  border-style: solid;
  height: 200px;
  max-height: 150px;
  overflow: scroll;
  width: 300px;
  padding-right: 20px;
  position:relative;
}

#handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
}

<div id="parent">

  <div>
  
    <h1>My First CSS Example</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  
  </div>
  
  <div id="handle">&nbsp;</div>

</div>

我将 HTML 的 style 属性重构为单独的 CSS。首先，如果你想使用元素的右边缘进行调整大小，而不是使用内置的调整大小 CSS（使用默认的 CSS，在父级上使用 resize: horizontal;），那么你将需要使用 JavaScript。

这还需要一个额外的元素来代表调整大小的条形 (<div id="handle">)，这是我们应用 cursor: ew-resize; 的地方。请确保该处理程序的 position 是 absolute 并且比父级向右略微偏移。还要注意，父级必须具有 relative 的 position，以便处理程序限制在父级中。

作为对JavaScript的解释，我们首先定义元素变量，并将startX和startWidth变量预设为未定义，稍后再重新定义。接下来，我们向处理程序添加事件侦听器，以处理mousedown上的调整大小。这将把startX设置为句柄的clientX位置。然后，我们根据父级的计算宽度使用parseInt将字符串值转换为数字来设置startWidth。然后，我们按顺序处理mousemove和mouse。

在mousemove上，我们运行resize函数。这将根据startWidth、鼠标x位置和起始鼠标x位置将parent的宽度设置为像素值。

在mouseup上，我们运行stopResize函数，该函数禁用mousemove和mouseup的事件侦听器。

希望这是你在寻找的答案。如果你有任何问题，或者对你所询问的内容有更好的解释，那么请告诉我，这样我就可以提供更深入的见解。

- andrilla

0

不幸的是，无法在垂直滚动条边框之外显示调整大小光标，因为它由浏览器的默认行为确定。您可以尝试更改边框颜色为透明或与背景匹配的颜色，以使它不那么引人注目，但光标仍将显示在滚动条内部。

- davit tskhvariashvili

0

我猜你的问题更与操作系统或浏览器相关。我尝试使用iOS和Chrome重现了这个问题，但我没有成功，一切都按照我的预期工作。

然而，对于基于WebKit的浏览器，您可以尝试：

body::-webkit-scrollbar {
  cursor: default;
}

- hrystynaKb

-1

只需将可滚动的 div 包装在一个带有 cursor: ew-resize; 的 div 中即可。

- neaumusic

这并不是特别有用的。你能提供更多关于如何解决问题的解释吗？ - andrilla

如果可调整大小的 div 不关心或不知道其子元素是否可滚动，那么光标肯定会位于其边界，而不管其内容。通常情况下，使用 CSS 的解决方案是创建另一个包装器，而不是试图在一个级别上做太多事情，这种情况下需要同时使其可滚动和可调整大小。 - neaumusic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Twisty · Accepted Answer

请考虑以下更改。

.myDiv {
  width: 100%;
  height: 200px;
  max-height: 150px;
  overflow-x: scroll;
}

.myDiv {
  cursor: ew-resize;
  border-color: red;
  width: calc(100% - 5px);
}

<div class="wrapper">
  <div class="myDiv">
    <h1>My First CSS Example</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <h1>My First CSS Example</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <h1>My First CSS Example</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </div>
</div>

这只在Chrome中需要，但也适用于其他浏览器。

这里的技巧是将内容div包装起来，使其成为一个视口。现在您可以调整width，以便当用户将其移动到滚动条上时，光标会在边缘之前改变。

我看到的问题是，当光标框刚好在一半之前时，调整大小光标的图形仍然显示，并且似乎渗出到滚动条上。这是因为div元素的边框正好在窗口的边缘。我们可以通过使div稍小而保持滚动条在同一位置来移动该边框，光标提前更改，图形不再看起来像渗出。