Question 11287 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Cursor Resize on scroll bar of div – Jquery

The Html div with cursor resize and scroll auto:

.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>

The div is displaying the cursor with resize option. But when the scroll bar is visible, the resize cursor is showing inside the scroll bar. How to show the resize cursor outside border of vertical scroll bar.

I have tried using with no luck:

.scrollable { 
  cursor: ew-resize; 
}

Please provide your suggestions. Thanks.
enter image description here

Tags:

5

Answers


  1. 0

    Unfortunately, it’s not possible to display the resize cursor outside the border of the vertical scroll bar as it is determined by the browser’s default behavior. You can try changing the border color to transparent or a color that matches the background to make it less noticeable, but the cursor will still be displayed within the scrollbar.

    Login or Signup to reply.
  2. 0

    Consider the following changes.

    .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>

    This is really only needed for Chrome yet does work for other browsers.

    The trick here is wrapping your content div and making it sort of a viewport. Now you can adjust the width so that when the User moves it over to the scrollbar, the cursor changes back before the very edge.

    The issue I saw was that when the cursor box was just a pixel before half, the graphic of the resize cursor still showed and appeared to bleed over onto the scrollbar. This is due to the border of the div element being right at the edge of the window. We can move that border by making the div a bit smaller, yet keeping the scrollbar in the same position, the cursor changes well beforehand and the graphic no longer looks like it bleeds over.

    Login or Signup to reply.
  3. 0

    I guess, your problem is more OS or Browser related. I tried to reproduce this from iOS + Chrome and I didn’t succeed, everything works as expected for me.
    enter image description here

    However for webkit based browsers you can try:

    body::-webkit-scrollbar {
  cursor: default;
}
    Login or Signup to reply.
  4. 0

    I’m not sure if this is specifically what you’re asking for. I couldn’t tell if your goal was to allow the box to resize or not. If my understanding is correct, your goal is to allow resize, but you don’t want that to interfere with the scrollbar. Here is my best answer based on this:

    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>

    I restructured the HTML style attribute into separate CSS. First of all, if you want to be able to resize using the right edge of the element, rather than using the built in resize CSS (with default CSS, use resize: horizontal; on the parent), then you will need to us JavaScript.

    This also requires an additional element to represent the resize bar (<div id="handle">). This is where we apply the cursor: ew-resize;. Make sure the position of the handle is absolute, and is placed slightly further right than the parent. It’s also important to note, the parent needs to have a position of relative on it, so that the handle is contained to the parent.

    As an explanation of the JavaScript, we start by defining our element variables, and presetting the startX and startWidth variables to undefined, to be redefined later. Next we add an event listener to the handle, to handle the resizing on mousedown. This will set the startX to the clientX position of the handle. Then we set the startWidth based on the computed width of the parent, using parseInt to convert the string value to a number. Then we handle the mousemove and mouse in order.

    On mousemove, we run the resize function. This sets the width of parent to a pixel value based on the startWidth, mouse x position, and starting mouse x position.

    On mouseup we run the stopResize function, which disables the event listeners for mousemove and mouseup.

    Hopefully this is the answer you were looking for. Please let me know if you have any questions, or better explanation for what you were asking for specifically, so I can provide further insight.

    Login or Signup to reply.
  5. 0

    Simply wrap your scrollable div with one that has cursor: ew-resize;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search